One of the benefits of using of an awesome page builder like Elementor Pro, is that high end design elements are available, with no coding experience needed.

However, when you want to set your site apart with just a little bit of customisation, understanding even a small amount of CSS is going to go a long way.

How to add custom colours to specific menu items

Setting custom colours for individual menu items in your Elementor / WordPress menu is one of these customisations that will add a ‘WOW’ factor to your design…and it just needs some Custom CSS.

Follow the video (above) for a walkthrough on how to use the code below.

The steps to follow:

1. Copy and paste the CSS (below) into the Custom CSS section of your WordPress menu.  You’ll find this in Elementor’s Advanced Tab, when you have the menu selected.
2. Obtain the menu item number from your developer inspect tool.  You’ll need to have created your pages and menu items, and published the menu, to do this.
3. Alter the menu item numbers in the provided CSS code
4. Alter the CSS styling of each element.
5. Hit Update and view on the front end.

Your Custom CSS Code

You’ll need to change the menu item numbers and (primarily) the colours.

				
					/* Coloured menu pointer - Nails */
.menu-item-419:hover { border-bottom:4px solid red!important;
}
/* Submenu of 'Nails' bottom border */
.menu-item-419 ul.sub-menu {
  border-bottom: 2px solid red!important;
}
/* Sub-menu - Nails */
.menu-item-419 .elementor-nav-menu--dropdown a {
    background:#fff;
    color:#454545!important;
}
/* Sub-menu - Nails Hover */
.menu-item-419 .elementor-nav-menu--dropdown a:hover {
    background:#ebebeb!important;
    color:#454545!important;
}
/* Coloured menu pointer - Make up */
.menu-item-418:hover { border-bottom:4px solid yellow!important;
}
/* Submenu of 'Make up' bottom border */
.menu-item-418 ul.sub-menu {
  border-bottom: 2px solid yellow!important;
}
/* Sub-menu - Make up */
.menu-item-418 .elementor-nav-menu--dropdown a {
    background:#fff!important;
    color:#454545!important;
}
/* Sub-menu - Make up Hover */
.menu-item-418 .elementor-nav-menu--dropdown a:hover {
   background:#ebebeb!important;
    color:#454545!important;
}
/* Coloured menu pointer - Hair */
.menu-item-417:hover { border-bottom:4px solid blue!important;
}
/* Submenu of 'Hair' bottom border */
.menu-item-417 ul.sub-menu {
  border-bottom: 2px solid blue!important;
}
/* Sub-menu - Hair */
.menu-item-417 .elementor-nav-menu--dropdown a {
    background:#fff!important;
    color:#454545!important;
}
/* Sub-menu - Hair Hover */
.menu-item-417 .elementor-nav-menu--dropdown a:hover {
   background:#ebebeb!important;
    color:#454545!important;
}