Applying the CSS nav-pills class for Pill style buttons in Joomla
When 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
- Log into your Joomla Dashboard.
Go to Extensions > Module Manager.
Select the Menu you want to style with Pill Styled buttons.
Click the options tab.
Click Advanced options.
In 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.
Save 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?
Tweet
Help Center Login
Configuring Joomla Menus
| 1. | Adding an Item to the Main Menu in Joomla |
| 2. | Creating a custom menu in Joomla |
| 3. | Applying the CSS nav-pills class for Pill style buttons in Joomla |
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!
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!