Menu with no css style JoomlaWhen you create a menu in Joomla and position the menu where you need it, you will have a list of links with no style. (See image to the right) Joomla comes with a built in JavaScript library called Bootstrap. Bootstrap has a CSS style that you can use to style your menu with Pill Style Navigation. Below are the steps to add the Pill Styled (nav-pils) navigation buttons to an inline list in Joomla.

Steps to use Pill Style navigation in Joomla 3.1

  1. Log into your Joomla Dashboard.
  2. Select the modules JoomlaGo to Extensions > Module Manager.
  3. Select particular module JoomlaSelect the Menu you want to style with Pill Styled buttons.
  4. Click options JoomlaClick the options tab.
  5. Select advanced options JoomlaClick Advanced options.
  6. Nav Pills class for bootstrap JoomlaIn the Menu Class Suffix box, type " nav-pills" in the box.

    Important! Because the Class is a suffix, you will need to have a space before the nav-pills text. If you do not put a space before the nav-pills class, the menu will not function.

  7. View with menu styled with nav piuls JoomlaSave the changes and visit your Joomla site. The Navigation will now display inline and the buttons will have Pill shaped colored buttons when your hover over the link.
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

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

Did you find this article helpful?

Post a Comment

Email Address:
Phone Number:

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

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!
Need More Help?

Help Center Search

Current Customers

Email: Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

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

Not a Customer?

Get web hosting from a company that is here to help.