How do I make a horizontal menu with Protostar?

To create a horizontal menu in Joomla's 3 default Protostar template, follow these steps (this is assuming that you already have a menu created in Menu Manager):

      1. If you want to just mover Main Menu, you can assign it to position-1. You can also follow these steps for any menu module located in a horizontal position.
      2. Go to Extensions -> Module Manager and open up your menu module.
      3. Assign position-1 for the module.
      4. Save the module at this point and bring up the front in of your Joomla site in a new tab.  You will see the menu items stack up in a vertical position.
      5. Go back to Module Manager and click on Advanced tab for the menu in question.
        nav-pills-blank-space
      6. In the text box for Menu Class Suffix type in nav-pills with a space in front the name.
      7. Click on Save.
      8. Return to your Front End browser tab and refresh the screen.

Your menu should now pop into a horizontal position on the monitor screen. The .nav-pills class will become a vertical menu in mobile devices with small screens.

What this did was assign the class "nav-pills" to your menu which is from the template.css within the Protostar template.  This template.css has many styles which modify the .nav-pills class to create this styling.  If you wish to override the styling, you can create your own custom template that loads after the standard template.  If you choose to modify template.css, keep in mind you could lose all of your custom styling if you upgrade your Joomla installation.

You need to be careful with doing extensive overrides for .nav-pills styling.  You may find that you have altered the way that the menu functions in mobile devices.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.