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|
i cannot even see the advanced options tab, it only shows 3 tabs details, options, menu assignment
Thank you for your comment. Since Joomla recently updated the interface, I have updated this article to reflect the new location of the Advanced Settings.
If you have any further questions, feel free to post them below.
great article... i cant seem to get it working though. I tried everything in this article, properly.
i am running off of Joomla! 3.0.3. and i even tried adding a space in front of nav--pills
and yes the type is set to menu..
any suggestions? Your help is much apreciated!
@ChrisNolan; make sure you put navpills in the "menu" class field and not in the "module" class field. This I did at first time and of course didn't worked out. I also have to use the space upfront..
Thanks a lot. This works excellent with Joomla 3.0.1
a space is required before " nav-pills"
Thanks for the great tutorial.
I have set it and it works well, but it drops down the submenus only for the current/active menu.
Is it possible to get drop down submenus for all of the menus someway ?
2013-09-18 12:14 pm EST
1 million thanx man. made my day.
i first tried 'nav-pills' initially and it didnt work. finally added a space ' nav-pills' and it worked
I cannot seem to get it to work.
I am using Joomla 3.1.5 and put ' nav-pills into the menu class suffix and it still shows vertically. Am I supposed to install something?
2013-09-19 12:50 pm EST
I done that and still cannot get it to work. www.tiverton.devon.sch.uk/joomla3
tried a "SPACE" before nav-pills entry?
Its in position top-a of halcyon responsive template if thats of any help
I know that nav-pills is Twitter bootstrap related. Halcyon template is based on a gantry framework. I don't know whether Bootstrap is included, you should sort that out first.
Thanks for that. How did the other people manage to do it?
I.ve only worked with the standard Protostar template, Bootstrap is standard. You should ask the builder of the template perhaps?
Hello charlottedrake and GeorgevanderSijde,
was ever so nice to point out, it looks like your Joomla template lacks Bootstrap which is what this article was based off.
From the Joomla side your outputting HTML seems to still have the issue of no space before the nav-pills
If you happen to be using the Google Chrome web-browser, you can load up your page, right-click on your MyProfile
link at the top and click Inspect Element
, you should see something like this:
<ul class="nav menunav-pills">
<a href="/joomla3/index.php/myprofile"><span class="menuitem">MyProfile</span></a>
As you can see what I highlighted in red
is showing menunav-pills
. It should instead read simply menu nav-pills
with a space in-between menu
If you get that taken care of by following the steps in this article, you could still add your horizontal menu functionality by simply adding Bootstrap to your Joomla template
. I confirmed this should work with Bootstrap 2.2.2, which could also be directly downloaded here
This is what your current theme would look like with Bootstrap also being used:
Hope that helps, let us know if you had any further questions at all. Thanks again GeorgevanderSijde
for helping out :)
Thanks Jacob, hopefully charlottedrake will succeed!
I am using Joomla 3.1.5 and I need to put a space " nav-pills" into the menu class suffix and it shows ready horizontally.
I don't need add bootstrap beacuse joomla 3.1.5 gets it ready install
Hello wmoreno3, and thanks for your comment.
Yes you're right Joomla 3.0 and above come with Bootstrap included. It looks like in this article we note that for versions 3.02 and 3.03 you need to be sure to add a space before the " nav-pills" class.
Are you saying that you still need to do this in Joomla 3.1.5? Or that your Joomla template already has the menu horizontally so you don't need to change it?
2013-10-24 1:31 pm EST
I just loaded Joomla 3.15 to test it on this issue. You will need to add the space in front of "nav-pills" as per the instructions above. This will enable the horizontal menu option to work.
I am testing this issue with Joomla! Version =Joomla! 3.1.5 Stable [ Ember ] 01-August-2013 14:00 GMT
and I can't get it working, either with or without the space before the " nav-pills" class in the field Module Class Suffix.
When examining the HTML source of the index.php, I can see:
<ul class="nav menu"> at the start of the top menu code (I am using the default protostar template,
with top menu in position-1)
in the <head> however, I can find this line with "nav-pills" inside:
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
It sounds like the CSS code for the nav-pills
class is getting added into the page, but then the menu itself isn't using the class, as it should read:
<ul class="nav menu nav-pills">
If you can let us know where you're encountering this issue at we can try to see what might be causing the problems, possibly an included file not being found or something of that nature. But it sounds like your Joomla Menu Class Suffiix
settings aren't being included into your menu at all, do you have any Joomla caching currently enabled that might be preventing these new settings from applying?
my fault! I did the same error as mentioned above by GeorgevanderSijde :
I added <space>nav-pills in Module Class Suffix field instead of Menu Class Suffix...
It works now, thanks all the same.
Hi alls again, I need to do a fresh install of joomla 3.2 and I still need to put a space in front of nav-vills, " nav-vills", into the "menu class suffix" in order to get an horizontal menu
Thank you! This was driving me insane!
Login to comment.