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 added to highlight that menu item (assuming menu-item-highlight is the CSS class added in previous step)

To add a simple button:

To add outlined button:

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 Customizer ▸ Additional CSS as explained here.
  • You can tweak the CSS code to change the colors and look of the highlighted menu item.
Not the solution you are looking for? Check other articles, or open a support ticket.