InMotion Hosting Support Center
Discussions on this article:

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
    vertical-menu horizontal-menu
Continued Education in Course 105: Working with Menus in Joomla 3
You are viewing Section 4: How to Create a Horizontal Menu in Joomla 3.1
Section 3: Joomla Menu Item Types

Joomla Community Google+ Hangout #3

June 3rd, 2014

Thank you @RustyJoomla for letting me speak on the Joomla Community Google+ Hangout!

Click here to watch!

Support Center Login

Social Media Login

Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
2013-03-25 1:25 pm
Your briljant! Thanks!
It doesn't work without the space indeed.
n/a Points
2014-04-02 8:34 am

open modules/mod/menu/default.php and change

<ul class="nav menu<?php echo $class_sfx; ?>


<ul class="nav menu <?php echo $class_sfx; ?>


then there is no need to add a space into menu-suffix textbox

n/a Points
2014-07-15 4:08 am

Works (with the space).  Thanks a lot!!

2013-04-10 5:10 am
i cannot even see the advanced options tab, it only shows 3 tabs details, options, menu assignment
23,602 Points
2013-04-10 12:37 pm
Hello bnbcloud,

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.
Thank you,

2013-04-12 11:35 pm
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!

2013-04-24 5:55 am
@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..
2013-05-28 7:59 pm
Thanks a lot. This works excellent with Joomla 3.0.1
a space is required before " nav-pills"
2013-09-07 6:19 pm
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 ?

Question: Be sure to add a space!

2013-09-18 12:14 pm
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
2013-09-19 10:00 am
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?
11,186 Points
2013-09-19 12:50 pm
You may have old cached data within your browser. Try <a href="">clearing your browser cache</a> and reloading the page.
2013-09-20 4:48 am

I done that and still cannot get it to work.

2013-09-20 5:51 am
tried a "SPACE" before nav-pills entry?
2013-09-20 6:01 am

Its in position top-a of halcyon responsive template if thats of any help

2013-09-20 7:10 am
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.
2013-09-20 7:28 am
Thanks for that. How did the other people manage to do it?
2013-09-20 8:44 am only worked with the standard Protostar template, Bootstrap is standard. You should ask the builder of the template perhaps?
9,968 Points
2013-09-20 1:14 pm
<div style="background-color: #FFF; padding-left: 10px;">Hello charlottedrake and GeorgevanderSijde,

<strong>charlottedrake</strong> as <strong>GeorgevanderSijde</strong> 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 <strong>nav-pills</strong> text.

If you happen to be using the Google Chrome web-browser, you can load up your page, right-click on your <strong>MyProfile</strong> link at the top and click <strong>Inspect Element</strong>, you should see something like this:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">&lt;ul class="nav <strong style="color: red;">menunav-pills</strong>"&gt;
&lt;li class="item-196"&gt;
&lt;a href="/joomla3/index.php/myprofile"&gt;&lt;span class="menuitem"&gt;MyProfile&lt;/span&gt;&lt;/a&gt;

As you can see what I highlighted in <strong style="color: red;">red</strong> is showing <strong style="color: red;">menunav-pills</strong>. It should instead read simply <strong style="color: red;">menu nav-pills</strong> with a space in-between <strong>menu</strong> and <strong>nav-pills</strong>.

If you get that taken care of by following the steps in this article, you could still add your horizontal menu functionality by simply <a href="" target="_blank">adding Bootstrap to your Joomla template</a>. I confirmed this should work with Bootstrap 2.2.2, which could also be directly downloaded <a href="" target="_blank">here</a>.

This is what your current theme would look like with Bootstrap also being used:

<img src="">

Hope that helps, let us know if you had any further questions at all. Thanks again <strong>GeorgevanderSijde</strong> for helping out :)

- Jacob</div>
2013-09-21 7:59 am
Thanks Jacob, hopefully charlottedrake will succeed!
2013-10-24 11:26 am
Hi alls.
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
9,968 Points
2013-10-24 1:29 pm
<div style="background-color: #FFF; padding-left: 10px;">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 <strong>3.02 and 3.03</strong> you need to be sure to add a space before the <strong>" nav-pills"</strong> class.

Are you saying that you still need to do this in <strong>Joomla 3.1.5</strong>? Or that your Joomla template already has the menu horizontally so you don't need to change it?

- Jacob</div>
32,948 Points
2013-10-24 1:31 pm
Hello Wmoreno3,

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.

Arnel C.
2013-10-28 2:09 pm
Hello everybody:
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,


9,968 Points
2013-10-28 2:58 pm
<div style="background-color: #FFF; padding-left: 10px;">Hello MbExel,

It sounds like the CSS code for the <strong>nav-pills</strong> class is getting added into the page, but then the menu itself isn't using the class, as it should read:

<pre class="code_block" style="width: 500px; white-space: normal; margin-bottom: -30px;">&lt;ul class="nav menu nav-pills"&gt;</pre>

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 <strong>Menu Class Suffiix</strong> 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?

- Jacob</div>
2013-10-29 5:02 am
Hello Jacob,

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.
2013-11-26 9:25 pm
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
2013-12-03 3:49 pm
Thank you! This was driving me insane!
2014-01-10 12:10 pm
Hello everyone, and thanks, got it up and working BUT would also like to have a horizontal sub-menu just below the parent horizontal menu.
At the moment I have a horizontal parent menu and a vertical sub menu.
n/a Points
2014-03-03 10:17 pm

Hi Brad

Thanks for your tutorial. For clarity maybe you could add that the Nav-pills works best when Main menu is assigned position 1(top)

Regards JohnB

n/a Points
2014-03-12 5:55 pm

a great article explained perfectly - thank you

n/a Points
2014-04-05 6:49 pm

hi, i have done the space before everything, the menu is still on the right side, but seems actually it is the 'latest articles' if i check it with firebug; but there is no menu on the top... :(using the joomla 3.2.3

Menu Class Suffix: nav-pillsModule Class Suffix: _menu

can you please help? screen grab would be helpful :)


37,753 Points
2014-04-07 12:38 pm
Hello Suzie,

We would need to take a look at your specific URL in order to investigate further. If you would not mind replying with it we will check into what is causing your issue.

Kindest Regards,
Scott M
n/a Points
2014-04-07 6:54 pm

hi Scott, very kind of you.  the menu shows on the bottom with the next and previoius button for some reason.  the latest articles shows the actual menu as at the moment not much content on the site, i am working on perfecting the template before the owner puts it live.  if you could keep the site address out of the discussion that would be appreciated:

i have gone through making the site responsive but i am missing parts which makes the background responsive as well, also to be able to change in the CMS...  if you have any link to do that too, i will buy you a beer ;)

thanks for your help in advance,


32,948 Points
2014-04-07 8:47 pm
Hello Suzie,

From what I could see of your code, it looks like the bottom link isn't even a menu item. You should go back and double-check it in the settings as described above. When I look at the code, the first two menu items show up as list items (which indicate it's a menu), but the "Getting Started" item is not located in the same area. Unfortunately, the only way for us to really see what's happening is to be able to login to the Joomla Admin so that we can see what you've done. I would go back through this article's instructions and look at the settings you have set for this module. Please remember that anything you post in the Community Support website is public domain. I did remove your website URL from the last comment because of your request. However, private support typically requires a hosting account with us and a submitted support ticket.

Kindest regards,
Arnel C.
n/a Points
2014-04-09 4:51 pm

many thanks guys for trying to help. unfortunately that navigation on the top has never been there... probably the reason why it did not become horizontal as it has never been vertical either.  i have tried to change every bit, saved it checked the site, nothing seems to be working. :(

i followed the steps to create my own template through your guide, but seems i am the unlucky one who have not managed it to work. 

this is not my site so i cannot commit to any payment for your support, so i will try to start all over again, then i will give it up... i have wasted days with trying to make it work, this should be so simple... not sure why it is not :(

anyway, many thanks for your help again, Suzie

n/a Points
2014-04-09 5:27 pm

guys! found it!  in your page:

you actually did not put this anywhere!

                <jdoc:include type="modules" name="position-1" style="xhtml" />                <jdoc:include type="message" />

i put it in the header and tahdah! :)you might want to put this info somewhere!  anyway really appreciate your help

happy suzie ;)

9,968 Points
2014-04-09 7:23 pm
Hello Suzie,

Glad to hear that you got things figured out. So it sounds like you were using a custom Joomla 3 template on your site at first?

You don't need to worry about adding any code in the header by default when trying to get horizontal menus to work in Joomla 3. Only if you were going through and creating your own template from scratch.

Please let us know if you run into any other issues at all.

- Jacob
n/a Points
2014-04-23 8:32 am

i am having issue with my joomla site 3.2.3, horizontal menu. how can i control that?

get me abcd steps please

11,186 Points
2014-04-23 8:37 am
Within Joomla 3.2.x, the process is the the same as with Joomla 3.1. Could you clarify what you are experiencing issues with?
n/a Points
2014-04-23 8:56 am

kindly call and see what my menu looks like and advice


this is my first live joomla site

11,186 Points
2014-04-23 9:39 am
I took a look at your site and it look like you made a typo and wrote <em>niv-pills</em> instead of <em>nav-pills</em> which is causing the issue.
n/a Points
2014-04-27 1:19 pm


I updated an old 1.5 site to 3.2.3 which worked fine. Then I added 3 new test articles (protostar template) and a horizontal top menu (topmenu) with nav-pills in position-1 for those articles - but the top menu just won't show in the frontend!

Any idea what I'm doing wrong?

I can't add menu entries in the usual way either - the Menu Type dialog won't open (works perfectly with 3.2.2) except when I enable the debug mode, then it opens... also the template files won't open - I can see them openening but then the view changes to showing "1" - not that this is a problem, I prefer editing those files offline anyway, but still I'm wondering what's happening here...

I'm not even sure if I'm allowed to post my questions here, but this was the post closest to the troubles I'm having, couldn't find anything helpful on google so far...

I'd be very grateful for any help...

Thanks in advance!


11,186 Points
2014-04-29 8:07 am
It sounds like either an issue within your browser, or an issue within your Joomla core files. First, I recommend <a href="">clearing your browser cache</a> to see if that resolves the issue. If the issue still persists, I recommend replacing your Joomla core files from the default Joomla 3.2.3 installation files.
n/a Points
2014-04-30 2:43 pm

Thanks for your reply!

I cleared my browser cache - now I can add new menu entries properly and edit the css files, but the menu still doesn't show...

Are the Joomla core files all the files in the joomla directory except for the copy of the template which I made and edited? I assume that's a stupid question, sorry, but I really don't know...

For now I installed Joomla 3.2.3 in another directory with a new database and started transfering the articles by html code one by one into the new system while the old system is still running in the old directory... it's not the most elegant solution, but it works...


9,968 Points
2014-04-30 4:01 pm
Hello Kyeema,

The Joomla core files would simply be the raw files that you download when first getting Joomla. So you were right, they are all the files in your Joomla directory except for the copy of the template you made and edited.

In order to troubleshoot what might be wrong with your menus not showing on the front-end, if you'd like to leave your website URL here in a comment we can remove it for privacy before posting to the comment to the public. That way we can check to ensure that all of your template's files are being properly loaded.

- Jacob
n/a Points
2014-05-06 1:17 am

Sorry for my late reply... and thanks for your answer, Jacob!

The link is: http://www.<removed for privacy>.eu/<removed for privacy>/index.php?option=com_content&view=article&id=103 (please remove before posting!)

I haven't had time to work on the project for the past couple of days... and if I do now I will work on the second joomla I installed and which works properly... still I'd be curious what went wrong when I updated the old system... I just don't want to replace the core files cause I fear that with the old template I used there might be troubles which I'm not willing to deal with as the old system goes offline anyway as soon as the new one goes on  - well, then I will definitely try ;)

Thanks again!


PS. Your captchas are really hard to read! It usually takes me several reloads till I get one I can decypher! :D

9,968 Points
2014-05-06 6:51 pm
Hello again Kyeema,

I went ahead and took a look at your site, and unfortunately from just looking at the front-end I can't determine why your menus might not be showing up. In the HTML source view of the page, it doesn't look like there is a mention of them at all, so either your template is missing something, or some of the core Joomla files aren't working properly.

- Jacob
n/a Points
2014-05-03 3:40 am

Thanks guys this solution works a treat even operating with default Gantry template in Joomla 3.2.4. Easy fix. Cheers.

32,948 Points
2014-05-05 1:39 pm
Thanks Kerryn!

We always appreciate the feedback! Let us know if you have any further questions!

Arnel C.
n/a Points
2014-05-06 7:17 pm

Hi Arnel

I have requested my webmaster to get me more info on how to use bootstrap codes in Joomla 3 for Menu Class and Module Class Suffix   If you have a good pdf or web for me to refer to would appreciate. In the older versions of Joomla I would just adjust the look of a page to reflect my template by putting 'art-article', or I would go through Dreamweaver and make html adjustments in CSS there. 

Now that we are using Gantry software I am loathe to fiddle too much with coding because it can screw up easily and my wm must then reverse engineer what I have done. I normally state what I have done and comment out though, so I never screw up that badly. Lol.

I would like the bootstrap code for simply centering the horizontal menu...I've tried a few different commands I thought would work from my own html code lists and threads online but I haven't got it yet.

If you could enlighten me that would be awesome.



32,948 Points
2014-05-06 8:06 pm
Hello Kerryn,

Thanks for the question. We also do much of our work here in Joomla, but we work primarily in writing articles using HTML with Boostrap codes in articles. The Menu and Module class suffix would probably need to be adjusted through CSS for the template. The best reference I'm finding on it can be found in this Stack Overflow article. You can adjust the positioning in the CSS. I hope this helps to shed some light on the issue. If I find anything further I will post another reply.

Kindest regards,
Arnel C.
n/a Points
2014-05-07 1:27 am

Hello Jacob,

thanks for looking at the site... I also think that some of the core files aren't working properly... when the new site is up I will replace the core files and if that doesn't work the template files... I will keep you posted when I find out what the reason was...

Thanks for your help anyway!


37,753 Points
2014-05-07 6:26 am
Hello Kyeema,

You are most welcome. We are always here to help the best we can. Please let us know if you have any other issues!

Kindest Regards,
Scott M

Question: Steps for different versions of Joomla?

n/a Points
2014-05-23 5:12 am

Joomla 1.7.3 version i need to add custom css code based i need clear step by step guide.

  1. now i added two menus[home,aboutus].but it showing first line home and next line same position aboutus.
  2. i need to change the menu appearance like home next about us same line
5,399 Points
2014-05-23 8:32 am
Hi Mohan, creating a horizontal menu in Joomla 3 is actually quite easy because this version of Joomla includes bootstrap. If you're using an older version of Joomla, such as the 1.7 version you specified, the steps will be a little different. For more help with creating a horizontal menu in older versions of Joomla, please see <a href='/support/edu/joomla-25/menus/create-horizontal-menu'>this guide</a>.
n/a Points
2014-05-27 8:41 am

Thank You 

n/a Points
2014-05-25 5:46 pm

HiI need help not to mane a menu but to mane menu points that opens alle the sobmenus ven clickt og tuched!!!


11,186 Points
2014-05-27 8:21 am
This can be achieved by simply adding some code to add a menu using Bootstrap. A user on the Joomla forums has described how to <a href="">create a Bootstrap dropdown menu in Joomla 3</a> which will help you along the process.
n/a Points
2014-06-03 9:09 pm

This article is great. I have been able to get the horizontal part to work. My question is how to get the submenus to go up instead of down. I'm using this as a footer. My website is

Any idea you may have would be appreciated.

Thanks so much


11,186 Points
2014-06-04 8:33 am
It is possible, however, would take quite a bit of custom code to make it look right. The following article will get you pointed in the right direction:

<a href="">Twitter Bootstrap nav, tabs and pills tutorial</a>
n/a Points
2014-06-04 10:01 am


I appreciate the link but you don't mention what file to edit. Is this custom.css in a template or something else? I really odn't want ot mess up something but really would like to have the menus drop up instead of down as this is on the footer.



23,602 Points
2014-06-04 10:24 am
Hello Sol,

It is difficult to say, because it differs based on how your website/template is coded. Most likely you will have to look through the source code to determine which file to edit.

Since you do not want to mess anything up, you may have to consult the developer, or reach out to the Joomla Community for assistance.

If you have any further questions, feel free to post them below.
Thank you,

n/a Points
2014-07-23 9:34 pm

This does not work for purity 3 template. Any Ideas. Any help would be greatly appreciated. 

11,186 Points
2014-07-24 10:31 am
These are overall general rules that work for most templates, although it is up to the developer as to their methods to do this. Could you clarify which specific layout of the Purity 3 template you are using as well as an example of the exact menu that you are trying to make horizontal?
n/a Points
2014-08-01 7:15 am

I am using corporate layout. with a secondary menu module in position 1. I have a mainmenu at the top. and assigned mainnav to position 1.  This secondary menu is a locations menu. I need it running across. this is a landing page to direct you to your local services by country thus I need it prominent rather than running on the sidebar going down. thanks in advance. I hope it all made sense. I feel pretty comfortable with all other configurations of the template but cant seem to get that working. Thanks. 

11,186 Points
2014-08-01 9:27 am
Could you provide me with a link to the site you are working on so that I can see exactly how it looks?
n/a Points
2014-08-01 11:49 am

Its still on my local server. However I can temporarily make it live so you can see. I will let you know once done. 


n/a Points
2014-08-08 5:18 pm

here is my test site. i would like the choose your location menu to display horizontally. don't mind the double menu currently displaying. it is due to trying to implement this but for purity 3 which is proving difficult.

11,186 Points
2014-08-08 5:59 pm
Upon viewing the code on the page that controls that menu, it appears that a CSS class for the menu is being defined somewhere labeled <strong>nav-stacked</strong> that is causing the issue. I recommend looking through your source code as well as the attributes for the menu to locate this and remove it. After doing so, it should then be horizontal.
n/a Points
2014-08-15 8:39 am

Thanks for all your help and looking into this for me. I will let you know once I try this. And I will feed this back to the community. I am pretty sure if this works, you will have helped a lot of purity 3 users as I have been on the joomlart forum among several others and no one has found a solution to this yet. 

Many Thanks


n/a Points
2014-08-16 3:41 am

This was helpful. I had problems with horizontal menu in purity III me too. Somewhere I found this helpful suggestion... Add 'navbar-nav' in the menu class suffix. It worked for me.

thanks thanks thanks

n/a Points
2014-08-16 4:38 am

For purityIII try to put navbar-nav in the menu suffix class

n/a Points
2014-08-28 7:00 pm

Thank you all so much. You are really great especially JeffMa who has stuck with me through this. navbar-nav certainly works. I am surprised no one from purity has been giving much help on this as its something that has been sought after for a while. Thanks guys you are awesome!!!!!


Arnibus Roboticus

"The Robots are coming!!"

n/a Points
2014-07-26 2:50 am
the is not working in joomal 3.0 purity II templates do you have any solution for it
11,186 Points
2014-08-01 9:28 am
I do not currently have a solution yet as they appear to be not using the Joomla standard bootstrap elements for their menu locations, however, I am looking into the comment above you with will have more information soon.
n/a Points
2014-08-03 6:26 pm

Helpful. Thank you

n/a Points
2014-08-05 3:30 am
The space seems to be necessary in all versions (in my case 3.3.3). But it helps. Thanks a lot.
n/a Points
2014-08-07 8:15 am

Thanks a million.  It worked for me. 

n/a Points
2014-08-08 12:25 am
It is very good
n/a Points
2014-08-24 8:25 pm
It is great! It works! I can't imagine a way to improve it. Thank you!
n/a Points
2014-08-27 1:00 am
The article is great, works as you state.

n/a Points
2014-09-10 4:10 pm
This is as simple, as it can be. Super! Thanks a lot.
n/a Points
2014-09-13 2:20 pm
Did not change anything in menu.
11,186 Points
2014-09-25 11:10 am
If your theme does something out of the ordinary, it can cause issues. If you could provide me with a link to the page in which your menu is located, I will be happy to take a look for you.
n/a Points
2014-09-25 6:53 am

For me It didn't work. Only change I found was the font (stylesheet). I used it without and with space but menu remained vertical.

I am using Joomla 3.3.3 and My template is Beez5 which is migrated from Joomla 2.5 by

n/a Points
2014-10-07 6:39 am

Its not working for 3.3.6

11,186 Points
2014-10-07 8:05 am
This method should still work in your version of Joomla. Could you provide a link to your site to take a look? Issues may also arise due to how your theme is coded as well.
n/a Points
2014-10-25 6:49 pm

"Joomla! 3.3.6 Stable [ Ember ] 01-October-2014 02:00 GMT"


I continue putting space in front of, " nav-pills"
n/a Points
2014-10-08 2:40 am
thanks a lot! it works. CMP
n/a Points
2014-10-17 4:56 am

thank you! went with space!

n/a Points
2014-12-15 3:52 am

I am using Joomla 3.3.6 I have inserted a 'space-nav-pills' in the Menu Class Suffix but it doesn't work.


Can someone help me please?

37,753 Points
2014-12-15 12:12 pm
Hello Cyo,

You would need to be a bit more specific. For example, what are you trying to accomplish? What have you tried? What are the steps you have taken? Are you getting any error messages?

Kindest Regards,
Scott M
n/a Points
2014-12-18 10:50 am
Empty space works. Is incredible how you discover this. Thank you
n/a Points
2015-01-16 12:30 pm
Thanks a lot to all.
I added the space in Menu Class Suffix.

I'd like ask another question. How I can add a "separator"?

Thanks again
32,948 Points
2015-01-30 10:44 am
Hello Gio,

This may depend on your template/theme, but you can find more about separators in Joomla here.

Arnel C.
n/a Points
2015-01-29 8:45 pm
This article didn't help me because I've done manipulations as it ws writen and my problem didn't deseapear.
32,948 Points
2015-01-30 10:52 am
Hello Christophe,

Sorry for the continued problems with the Joomla menu. If you can provide more information on the issue, then we might be able to provide you some assistance. We're mainly looking for a URL to observe the issue and the steps you're taking that lead up to the problem. If you have any further questions or comments, please let us know.

Arnel C.
n/a Points
2015-02-02 9:10 pm
It was excellent! I'm using the 3.3.6 and only need to add space before nav-pills.
n/a Points
2015-02-11 6:00 am
This was exactly what I needed!
n/a Points
2015-02-17 7:35 am
Awesome.... works... :) thnks alot
n/a Points
2015-03-04 1:36 pm

Great help!!! The space trick totally worked. Thanks a lot.

2015-07-05 10:36 pm
It's Work for me Great, Thunk you for help
n/a Points
2015-08-12 4:12 am

This "nav-pills" thing didn't work for my site with or without space. The URL of my site is "". Can someone plz help me out to fix this issue.

32,948 Points
2015-08-12 11:02 am
Hello Irfan,

Sorry for the problem with the nav-pills. We're not sure of your exact problem. We couldn't go to your URL because it requires a password to login. Please provide more information about your problem including version numbers (for Joomla), and the exact steps so that we can duplicate the issue.

If you have any further questions or comments, please let us know.

Arnel C.
n/a Points
2015-08-17 4:38 am
I recently updated/migrated my Joomla from 2.5.28 to the latest 3.4.3 version. After the successful upgradation process I am encountring this footer menu problem, before the migration my menu was working horizontaly and now it is showing verticaly. The credentials for the website are: *removed by moderator*
37,753 Points
2015-08-17 12:03 pm
Hello Irfan,

Apologies but we are not allowed to log into non-customer sites to troubleshoot. You may want to check the Joomla forums to see if anyone has had the same issue as yourself.

Kindest Regards,
Scott M
n/a Points
2015-08-28 4:54 am

This worked fine for me (with the leading space) using Joomla 3.4.3 and the Protostar Template.

Thank you VERY much for your help.


n/a Points
2015-10-01 11:01 am

This works for me in T3: <space>navbar-nav

n/a Points
2015-10-06 6:32 am

Woww!!!! Thank you so much!!!!! I couldn't make it work with the nav-pills and I didn't know what to do, but navbar-nav with space works perfectly :)

Thanks again!! 

n/a Points
2015-10-20 5:52 pm

Perfect! Thnx a lot!

n/a Points
2015-10-05 1:16 pm

Hi there and thank you for this tip.. would be amazing if it would work for me too.

I run the latest version of joomla and using purity III template. The nav-pills (with space) isn't working.

Can you please check www.**** the footer menu - Disclaimer -Credits - Contatti.

Thank you very much

n/a Points
2015-10-06 11:05 pm

I added the space nav-pills in menu class suffix.. its works

How can I make the menu alignment center from default left protostar joomla 3.4.3?

32,948 Points
2015-10-07 12:26 pm
Hello Omar,

You will likely have to change the CSS in order to make that change to the menu alignment. Check out this post from the Joomla Support forums. Making any changes to position are generally going to related to changes in the CSS.

I hope this helps to answer your question, please let us know if you require any further assistance.

Arnel C.
n/a Points
2015-11-10 11:58 am

Hi There. Thank you for your support. It's really amazing...

The "nav-pills" worked fine, but the menu sep border is still vertical, any ideas to change it?

The border that separates the menu itens is on top of the menu item instead of between itens. 


10,077 Points
2015-11-10 9:59 pm
Hello Mariotto,

Can you please provide your domain so we may look into the problem as the code seems to be working for me without fail.

Best Regards,
TJ Edens
n/a Points
2015-11-18 6:18 pm

hi all, thanks for the great info. i have a question and have searched for a long time to no avail.

are there other Menu Class Suffix other than nav-pills?

i have odified my menus using css but always wondered if there were a list of menus predesign to use by changing the suffix.





32,948 Points
2015-11-18 10:12 pm
Hello D.,

Thanks for the question. Unfortunately, I am not aware of other Menu Class suffixes other than the nav-pills. It may be limited to the template being used for the Joomla installation. You can find more about menu class suffixes by reading through the documentation. Apologies that I can't provide a direct answer!

If you have any further questions or comments, please let us know.

Arnel C.
n/a Points
2015-11-27 10:22 am

adding a space before nav-pills WORKED

n/a Points
2016-05-13 10:58 am

Thanks for the wonderful post, adding a space before nav-pills worked like a charm to me..

n/a Points
2016-05-19 4:56 am

Thank you. It is working and usseful post.

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!