How to Highlight a Menu Item?

A block-enabled theme allows you to use a Full Site Editor.

Navigate to Appearance > Editor to open Full Site Editor. Then find the menu item you want to highlight and double-click it. Then find a Settings icon and click it. This will open the Settings block.

Scrol down to find the Advanced section, click the arrow icon to expand it. In the opened Additional CSS Class field write highlighted-menu. Hit the Save button.

After this you need to add CSS code to your WordPress theme.

Go to https://example.com/wp-admin/customize.php, replace example.com with your domain name.

Then click the Additional CSS tab and paste the following there:

1 /* Highlighted menu */
2 .highlighted-menu
3 {
4 background: #FFB6C1;
5 border-radius: 35px;
6 padding: 0px 20px;
7 line-height: 50px;
8 }

Click the Publish button to save the changes.

Was this article helpful?