Let’s say you have featured products or services on your website, so you must direct visitors to a specific page. To help direct your website visitors to the page you are referring to, highlighting the menu items might be helpful to you.
There are several things that you can do to highlight your menu item/s, as below:
- Adding a different background color
- Adding a different text color
- Adding a label
- Etc.
This article will show you how to highlight menu items, more specifically, add a different background color for particular menu items in WordPress without the help of any plugin.
How to Highlight Menu Items by Adding a Different Background Color
First, we will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress dashboard, navigate to Appearance -> Customize. If you use a block theme, you can read our article here to learn how to enable theme customizer in a block theme.
Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.
.highlight-menu-item {
float: inherit;
color: inherit;
cursor: pointer;
position: relative;
top: 0px;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
margin-right: 0px;
margin-left: 0px;
background-color: #c04d02;
padding: inherit;
line-height: inherit;
text-transform: inherit;
}
Once you’ve added the CSS snippet, apply it by clicking the Publish button.
Alright, we move on to the next step; we will edit the menu item by adding a simple code to the Navigation Label. On your WordPress dashboard, navigate to Appearance -> Menus.
Once you enter the menus settings screen, select the menu item/s to which you want to highlight (add a different background color), then go to the Navigation Label by clicking the dropdown button.
Well, we are going to start to edit the navigation label. Please copy the simple code below, paste it into the Navigation Label field, and then edit the code based on the name of your menu item.
Note: In this example, we chose the Flight we wanted to highlight.
<span class="highlight-menu-item">Flight</span>
Once you’ve finished editing the navigation label/s, apply it by clicking the Save Menu button.
To see how it works, go to your site by opening a new window.
Note: You can customize the highlight with your preference. To do that, go back to the Additional CSS and edit the code snippet. You can edit the background color, font, padding, etc.
We’ve changed the highlight background color to blue in this example by editing the hex color code (see the image).
Don’t forget to apply the changes by clicking the Publish button once you finish editing.
The Bottom Line
This article shows how easily you can highlight items on your navigation menu by adding a different background color without the help of any plugin. You can apply this tutorial for any website navigation type, such as a horizontal navigation bar, dropdown navigation menu, vertical sidebar navigation menu, etc.
