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
Like this Article?

Login to comment.

Your Opinion Matters

... but we need to know what you're thinking!

I'm Brad Markle, your friendly Community Support technician, and I wrote the article you're looking at now. I like to think it's perfect, but I'm sure you have some suggestions. Please, let me know what they are!

Feedback
Your Email Address
Because we'd like to talk with you!

Latest Questions

If you need some help, submit your question to our Community!
We guarantee a response within 60 minutes (8am - 9pm EST, Monday - Friday)
Ask a Question!
Recent Questions
  1. I can't access my website
  2. we-creation.com server down
  3. How do I delete the DNS entry?

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!