Simple three step tutorial to add responsive menu for MyBB forums

Responsive Menu is the core of a responsive design. By default, MyBB theme are not responsive and to make them responsive you need to add a responsive menu in the header section. This is a simple three step tutorial which will help you create a responsive menu for MyBB forums and will improve the look and feel of your forum. For this tutorial, I have used default MyBB theme and this tutorial should work fine for most of the forum.

If you get any doubts, just let me know in comments. I will help you with getting a responsive menu for your forum. This tutorial is purely made with CSS and HTML ie no jQuery is used which is pretty neat and clean for a dropdown responsive menu. 🙂

In this tutorial, I have used font awesome based icons.

Steps :-
1. First of all open the header template located at -> Admin cp > Templates and Styles > Templates > Your Theme Template > header Templates > header and add the below code just above


[gist]https://gist.github.com/anonymous/b4b9240bccd5e4ca7f44303cec62659b[/gist] 2. Go to your theme and click add stylesheet. Write the name as responsive_menu.css and click write my own content.
3. Paste the below content and click save stylesheet.
[gist]https://gist.github.com/anonymous/283a5cc77698f0419d3df991b937cc40[/gist]

Go to your live forum and you will see a responsive dropdown menu for MyBB forums something like these
Live Demo – http://codepen.io/WallBB/pen/bwwwBL
Responsive menu mybb desktop

Responsive menu mybb

Responsive menu mybb dropdown

Comments (5)

Dan

Amazing Tutorial, It help me create my forum header responsive 🙂
Thanks a lot

1 year ago
Zenko

This really helped but I’m still having some trouble with it. For example the text is blue and I can’t figure out where in the CSS I have to edit to make the text white like your demo. Can you help me?

1 year ago
    WallBB

    That is easy to do so, modify the a:link to whatever you want
    a:link {
    color: #333333;
    }
    You can even add something like this
    nav a:link {
    color: #333333;
    }

    Hope it helps 🙂

    1 year ago
Josh

Works like a charm, it is easy to add.
I want to know can I remove font-awesome icons ?

1 year ago
    WallBB

    Yes you can Josh, if you don’t want to use font awesome icons no need to use 🙂

    1 year ago

Leave a Reply to Dan Cancel reply

Your email address will not be published. Required fields are marked *

@