How to Create a Horizontal Menu in Joomla 3.1

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.

1. Log into your Joomla 3.0 administrative dashboard
2. In the top menu, click Extensions and then click Module Manager
3. In the list of modules, click on the module for the menu you would like to modify. Make sure it’s Type is menu.
4. 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.
5. 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