Posted on

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

9 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.

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.