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.

Join Our Newsletter




We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
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.