Posted on 10 Comments

Simple three step tutorial to add responsive menu for MyBB forums

Responsive menu mybb desktop

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



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.

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

10 thoughts on “Simple three step tutorial to add responsive menu for MyBB forums

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

  2. 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. 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 🙂

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

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

  4. this coding does not work please tell me how can I do?

    1. Are you using default theme or some other theme ?

  5. Does it make when whole pages responsive?

    1. It is for the menu i.e. navigation.

  6. I have the same issue as Zenko above. I have tried adding:
    a:link {
    color: #333333;
    }
    You can even add something like this
    nav a:link {
    color: #333333;
    }

    These to global.min.css, responsive_menu.css, and responsive_menu.min.css. I can see upon refresh that the colors have changed for a split second. Then are overwritten by some other .css and change back to blue. Help would be greatly appreciated.
    Thank you for all your efforts in helping the MyBB and other communities with your knowledge and tutorials.

    Have a blessed and prosperous day!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.