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:
.main_menu__list .highlight-menu-item > a + ul li { background-color: #cf556c; }
.main_menu__list .highlight-menu-item > a + ul li a { color: #FFF !important; }
.main_menu__list .highlight-menu-item > a + ul li a:hover{ background-color: #ff8177!important;}

[People who liked this]