Customising Menu Item Colours

Giving a menu item an unique colour can be a great way to make it stand out in the menu or on the page.

Here's a short guide on how to customise a menu item's colour:

1. Navigate to Application > Menu Builder and go to the menu you wish to change.

2. Create a new menu item or edit the existing menu item you wish to edit.

3. Add a class in the CSS class field.

4. Navigate to Admin > Design. Then go to Master Design or the Theme you wish to change.

5. Go to Edit Style > Advanced > Custom CSS (for Master Design it is just Advanced > Custom CSS).

Master design:

Theme:

Please note: If the field in Theme is linked like so -  , you need click the icon to unlink it from the Master Design

To change the background colour, specify the new color using:

.main_menu__list .highlight-menu-item { background-color: #cf556c; }

Please note: Change the class name and colour code where necessary

To change the text colour use the following:

.main_menu__list .highlight-menu-item > a { color: #FFF !important; }

To change the background colour on hover use:

.main_menu__list .highlight-menu-item > a:hover { background-color: #ff8177 !important;}

To change the background colour of sub-menu items do the following: