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:

  1. Log into your joomla dashboard
  2. In the top menu, hover over Extensions and click Template Manager
  3. Click the Templates tab, and then click the Details and Files link next to your template
    click-details-and-files
  4. Under stylesheets, click the stylesheet for your template. If you have numerous stylesheets, find and click one similar to general.css
    click-the-style-sheet-to-edit
  5. Scroll to the bottom of the file, insert the following code, and then click Save & Close

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

    edit-the-css-file-and-save
  6. 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.
  7. 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
    edit-menu-class-suffix
  8. 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 MenuHorizontal Menu
    vertical_menu horizontal-menu
Continued Education in Course 106: Create and Configuring Joomla 2.5 Menus
You are viewing Section 6: Creating a Horizontal menu in Joomla 2.5
Section 5: Joomla 2.5 List All Categories - Categories Options
Section 7: Joomla 2.5 Menu Items - List All Categories
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
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.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

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

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!

n/a Points
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.

Staff
9,942 Points
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.
n/a Points
2014-07-17 10:27 am

There are no additional stylesheets. 

Staff
9,942 Points
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
n/a Points
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?

Staff
10,994 Points
2014-08-14 4:33 pm
Hello Skrista,

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

-John-Paul
n/a Points
2014-09-25 8:25 am
I needed to fix the joomla 3 cleanlogic template to get a horizontal menu. The file quoted above was different, mine is menu.css but the code provided above was inserted and worked like a dream !!! thank you :)
n/a Points
2014-09-26 12:59 am

I did everythig like in your tutorial, but submenu is shown not in place

audrone.serveriai.lt

Joomla 2.5.25template Beez20

Could you help?

Staff
10,994 Points
2014-09-26 12:51 pm
Hello Beata,

Thank you for our question. I followed this guide in Joomla 2.5 with Beez20 template, and it is working successfully.

We are happy to help, but will need some additional information.

In Step 6 which menu are you selecting?

Also, make sure the menu is assigned to an article, so it will display.

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

Thank you,
John-Paul
n/a Points
2014-09-27 5:32 am

Dear John-Paul,

I am using top menu, position 0,   in Menu Class Suffix I  wrote  horizontal_menu

In menu manager Top menu has 6 live items and one item submenu. Submenu "Straipsniai" is external link and it should be under "Nuorodos" However it is on right side

Look a screenshot  here: http://audrone.serveriai.lt/topmenu_forumui.htm

Top menu is related with top module TopLook how this submenu is shown on web: http:audrone.serveriai.lt

I have tried with other my created menu and modules, result is the same

Only extension "roknavmenu"  is able to create horizontal menu with submenu's - You will in my page with screenshots

 

Staff
18,399 Points
2014-09-29 1:28 pm
Hello Beata,

Sorry you're still having problems with the submenus. You mention "roknavmenu". We don't typically provide support for third party extensions, but I did spend some time looking through our documentation and researched Roknavmenu. You can find more info on the extension by going here. Are you currently using the extension to create the submenu? Since we don't have documentation on this ourselves, you may want to check out their documentation to see the proper way to use the plugin to build the submenu that you trying to build.

Regards,
Arnel C.
n/a Points
2014-09-30 1:22 am

Sorry,

You didn't understand my letter. I can't create normal submenu without some extension which you see on top over banner. Submenu "Straipsniai" should be under "Nuorodos"

audrone.serveriai.lt

and additionally to compare (you can see in my image) I did roknavmenu which work normally and I don't need some help with it!

Nobody read my problem and questions carefully or I am writing unclear? English isn't my native language... And I don't find some help nowhere...

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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

13 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

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: support@InMotionHosting.com
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!