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 the menu builder application 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 'Design' in 'Admin'. 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 will look like this

a Theme

note: if the field in theme is linked like so:  you need click the icon to unlink it from the Master Design

6. Specify the new background color for the menu item using:

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

Note: Change the class name and colour code where necessary

6. To change the text colour use the following:

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

6. To change the background colour on hover use:

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

7. If you want to change the background colour of sub-menu items do the following: