By default, menus in Joomla 3.0 will be displayed vertically. Many users would like to instead create horizontal menus, such as a menu that appears at the top of your website. In this tutorial, weโll walk you through the steps for creating a horizontal menu in Joomla 3.0.
Creating a horizontal menu in Joomla 3.0 is not as difficult as creating a horizontal menu in Joomla 2.5. This is mostly due to the addition of bootstrap in Joomla 3.0. In this article weโll show you how to use bootstrapโs nav-pills CSS class to make a hoizontal menu.
Creating a Horizontal Menu in Joomla 3.0:
In this tutorial, weโll assume that youโve already created a menu in Joomla 3.0 and assigned it to a position. The following steps walk you through updating an existing menu so that it displays horizontally.
- Log into your Joomla 3.0 administrative dashboard
- In the top menu, click Extensions and then click Module Manager
- In the list of modules, click on the module for the menu you would like to modify. Make sure itโs Type is menu.
- Within the set of tabs toward the top of the page, click the Options tab, then click the Advanced Options link, to access the settings.
- Find the following setting:
Menu Class Suffix
A suffix to be applied to the CSS class of the menu items
For this setting, enter nav-pills and then click the Save button in the top left of the page.
Important! If you are using Joomla 3.02 and 3.03 or cannot get the nav-pills to work, you may need to add a SPACE before nav-pills entry.
You can see in the screenshots below how setting nav-pills as the Menu Class Suffix sets a menu to be horizontal.
| Menu Class Suffix: (empty) |
Menu Class Suffix: nav-pills |
|
|
