Nav Menu - Highlight Button w Custom CSS

Our users frequently want to highlight a navigation menu item (usually the contribute button). In this article, I'll teach you how to emphasize a menu item in three short steps.

Step 1. Add a CSS class to the navigation menu item that you want to highlight. 

In your WP dashboard go to Appearance => Menus. In the Menus section, click on the button "screen options". Under the "Show Advanced Menu" properties, select "CSS classes". Now you have the ability to add custom CSS classes to your nav menu.

Select your menu item and add your custom class. I chose the contribute button and gave it a custom class of "contribute". Click save.

Step 2. Write the Custom CSS 

Now that you have added a class, you can emphasize the nav menu item by writing custom CSS. 

In my use case, I wanted to highlight the contribute button in my nav menu. I added a custom class of "contribute". Here's the custom CSS that I wrote:

#wrapper #header-wrapper #access-wrapper #access .menu .sf-menu li.contribute a { background: red; }

See how I appended the "contribute" class the the list item (ex. li.contribute) above? After saving my CSS, the button's background would be red.

3. Add Your CSS and Save

To add your custom CSS, go to the Victory Options panel and go to Advanced => Custom CSS Box. Paste your custom CSS into the box and save your options.

When you refresh your browser on the front end, you will see that your navigation menu is highlighted. 

Feedback and Knowledge Base