How to Highlight a Certain Menu Item?

To highlight a certain menu item, follow the steps as below:

  • Under Appearance, go to Menu
  • Open the menu item
  • Click on Screen Options, Enable the CSS Classes Checkbox and give a class to the menu item that needs to be highlighted
  • Save

Once the CSS class is added, the CSS as below can written to highlight that menu item (assuming menu-item-highlight is the CSS class added in previous step)

To add a simple button:

.menu-item-highlight
{
 background: #000;
 border-radius: 35px;
 padding: 0px 20px;
 line-height: 50px;
}

To add outlined button:

.menu-item-highlight {
color: #ffffff;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}

.menu-item-highlight a {
 color:#1172c4
}

.menu-item-highlight:hover {
color: #ffffff;
background: #1172c4;
border-color: #1172c4;
}

li.menu-item-highlight:hover > a {
 color:#ffffff;
}

.menu-item-highlight:active {
border-radius: 22px;
}

Please notice in the code above, there is a dot (.) before the CSS class: menu-item-highlight

Additional Notes:

  • This CSS can be pasted in bu going in Customizer ▸ Additional CSS.
  • You can tweak the CSS code to change the colors and look of the highlighted menu item.