How to Create Horizontal Menus in Joomla!

Joomla

Joomla! is a great content management system and without a doubt, one of the best on the market. One thing that is a little bit irritating though, is the lack of horizontal menus. Sure, the vertical default menus are fine, but for that all-important menu that features across the top of your site, a horizontal option would be much better – both for the look of the site and the usability.

Creating horizontal menus is possible in versions 2.5 and 3.0; however, the latter is easier thanks to bootstrap. In this guide, we’ll show you how to add a new horizontal menu on both of the most popular versions of the CMS.

Creating a horizontal menu in Joomla! 2.5

To begin, the first thing you will need to do is log in to your Joomla! admin dashboard. Once this is done go to Extensions > Template Manager. On the next page, locate your template and click on “Details and Files”.

Under the “stylesheets” option for your chosen template, click on “general.css” and add the following code to the bottom of the file (make sure you scroll to the bottom of the file before pasting):


.horizontal_menu li
{
display:inline;
list-style-type:none;
padding-right:4px;
float:left;
}

Click on “Save & Close” to register the changes.

With the code in place, the next step is to edit the module of the chosen menu. You can do this by going to and finding your menu (the filter menu can make this task easier).

In the “Advanced Options” section, enter the term “horizontal_menu” (no quotation marks needed) next to “Menu Class Suffix” and click on “Save”.

Creating a horizontal menu in Joomla! 3.0

To get started, you will once again need to login to your admin dashboard and go to Extensions > Module Manager.

Locate the module of the menu you would like to edit and click on Options > Advanced Options from the tabs at the top of the page. In the “Advanced Options” page there will be a setting called “Menu Class Suffix”, in the field next to this option you should enter the term “nav-pills” (no quotation marks needed) and click on “Save and Close”. You will now see that the nav-pills bootstrap has changed the menu from vertical to horizontal.

On some newer versions of Joomla! there have been issues where the above “nav-pills” method has not worked as suggested. If you follow the tutorial and find that it has not worked, start over, this time adding a SPACE (just one) before typing in “nav-pills”. Doing this should rectify the problem.

After completing either method, go to your homepage, click on “refresh” and you will see your new look horizontal menu in full effect.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Joomla! Web Hosting Provider

Joomla

HOSTPAPA.CA
Get a 45% Discount by using our link.

HostPapa

A popular Canadian web host which offers a one-click Joomla installation option through the included control panel (cPanel). HostPapa is our recommendation to host a Joomla website.

Leave a Reply

Your email address will not be published. Required fields are marked *