Applying color to a single menu item in Joomla

Applying a unique color to a single menu item is a great way of adding focus to that item. In the following tutorial we will detail how you can edit the styling of a single menu item using some custom CSS.

The following steps focus on Joomla51 templates however the same method should apply regardless of the template you are using. If your template does not include a Custom CSS option, try adding the CSS to the end of your templates CSS file.

  1. Within your Joomla administration navigate to the menu which contains the menu item you wish to style (Menus -> [YourMenu]).

  2. Joomla assigns a unique ID to each menu item. We are going to use this ID when styling the item. Under the ID column of your menu items, take note of the ID for the menu item you wish to style (Eg. 507).

    menu item ID

  3. Using your menu item ID we will add some CSS to your template using the 'Custom CSS' field of your templates parameters. Navigate to Extensions -> Templates and click in to your template settings. Select the 'Custom CSS' tab and add the following CSS to the field provided, editing the ID to match that of your menu item and the color to your own taste.

    .item-507, .item-507 > a {
        color: #D14233 !important;
    }
  4. Hit 'Save & Close' to apply your custom CSS.

  • Saturday, 12 March 2016

Who's Online

We have 575 guests and 3 members online

Join Our Newsletter

Free Classic Template

Sign up to our Newsletter and receive news on template releases and discount coupons along with free access to our 'Classic' Joomla template.

Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.