Creating a Horizontal menu in Joomla 2.5
In previous versions of Joomla, the ability to create both vertical and horizontal menus was built in. With newer versions of Joomla however, such as Joomla 2.5, menus by default are vertical and there is not an option to change them to list items horizontally. Using CSS, you can create a horizontal menu, and in this Joomla 2.5 tutorial we'll show you how to do this.
To create a Horizontal menu in Joomla 2.5:
- Log into your joomla dashboard
- In the top menu, hover over Extensions and click Template Manager
- Click the Templates tab, and then click the Details and Files link next to your template
- Under stylesheets, click the stylesheet for your template. If you have numerous stylesheets, find and click one similar to general.css
- Scroll to the bottom of the file, insert the following code, and then click Save & Close
- The next thing you will need to do is edit the module of the menu you would like to be horizontal. To do this, hover over Extensions in the top menu and click Module Manager. Then use the filter feature to find your menu and click on it.
- Under the Advanced Options, next to Menu Class Suffix enter " horizontal_menu". Be sure not to enter the quotes, but do include the space before the word horizontal_menu. Then click Save
- Visit your Joomla 2.5 site again, refresh the page, and you should now see your new horizontal menu! As this is a simple CSS change, this should work regardless of who you use to host your Joomla website.
Vertical Menu Horizontal Menu
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!
Create and Configuring Joomla 2.5 Menus
2014-07-17 4:37 am
I am using afterburner2 template. How to do it. Its not working with this.
I have two stylesheets. I made changes to both.
2014-07-17 9:57 am
I am unable to see the exact files you are referring to, but based on the file names it appears that you are editing the specific stylesheets for Internet Explorer 8 and 9 which is not the main stylesheet. You should have an addition stylesheet in there which will need to be edited.
2014-07-17 1:37 pm
It appears that you are using a Joomla 3 template but are comments on a Joomla 2.5 article which would have different steps. To create the horizontal menu in Joomla 3, take a look at the following article:
How to Create a Horizontal Menu in Joomla 3.1
2014-08-14 3:03 pm
I did insert the code you gave . . . and followed your instructions.
Now I have the horizontal Menue but it is not taktile; you can't click it.
How can I fix this problem?
2014-08-14 4:33 pm
Thank you for your question. We are happy to help, but will need some additional information. Did you already Add a menu item to your menu? When you do this, you typically link the menu item to an article, or a URL.
If you have any further questions, feel free to post them below.