Genesis - Create a highlighted menu item

In this tutorial, we'll show you how to create a highlighted item in your navigation menu. It will look like this:

Create a Highlighted Menu Item

1. In your WordPress dashboard, go to Appearance > Menus > select the menu you'd like to add a highlighted link to.
2. At the top right corner of the Menus screen, click Screen Options.
3. Check the box that says CSS Classes.
4. Locate the menu item you want to highlight and click the gray drop down arrow to open the options for that menu item.
5. In the CSS Classes field, type menu-highlight and then save the menu.
6. Click here and copy the code.
7. Go to Appearance > Customize > Additional CSS and paste the code. Click Publish.

Customizing the Highlighted Menu Item

Let's break down the code from step 6 above:

.genesis-nav-menu .menu-highlight a:not(.sub-menu a) {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 18px 26px 14px !important;
}
.genesis-nav-menu .menu-highlight a:not(.sub-menu a):hover {
    background: #aaaaaa !important;
    color: #ffffff !important;
}

First section: Changes background color, link color, and padding (width/height) of the highlighted menu item.

To change the background color, replace 000000 with your desired color.

To change the link color, replace ffffff with your desired color.

To change the padding of the menu item box, adjust the pixel values. The first value (18px) is the top padding; the second value (26px) is the left and right padding; the third value (14px) is the bottom padding.

Second section: Changes background color and link color when hovered.

To change the background color on hover, replace aaaaaa with your desired color.

To change the link color on hover, replace ffffff with your desired color.

All of these customizations can be made right inside the Customizer / Additional CSS box.