How to change background on one menu item in navbar

Here’s a brief tutorial on how to make one WordPress page menu item have a different background color from the rest, and change color on hover:

Full disclosure this is the first time I’ve asked ChatGPT to just write a tutorial for me.

Step 1: Add a Custom CSS Class to the Menu Item

1. Go to your WordPress admin dashboard.
2. Navigate to Appearance > Menus.
3. Select the menu where you want to modify the menu item.
4. Locate the menu item you want to style differently and click on it to expand its options.
5. In the “CSS Classes” field, add a custom class name. For example, let’s use “highlight-menu” as the custom class.
6. Save the menu to apply the changes.

If you don’t see CSS classes as option, click on Screen Options and enable it.

Step 2: Add Custom CSS Code

1. Go to your WordPress admin dashboard.
2. Navigate to Appearance > Customize.
3. In the Customizer, click on “Additional CSS” (or a similar option depending on your theme).
4. In the Additional CSS section, add the following CSS code:

 
/* Change background color for the menu item */
#navigation li.highlight-menu { background: #FFFF00 !important;}
/* Change hover background color for the menu item */
#navigation ul li.highlight-menu a:hover { background: #f4f4f4 !important;}
/* Padding adjustments needed */
#navigation-inner .menu > li > a {padding: 0 17px;}
#navigation .menu > li {margin-right: 0px;padding-right: 0px}

If you’re using an Inside Header nav menu try using this CSS code:

 
/* Change background color for the menu item */ 
#navigation-aside li.highlight-menu { background: #FFFF00 !important;} 
/* Change hover background color for the menu item */ 
#navigation-aside ul li.highlight-menu a:hover { background: #f4f4f4 !important;} 
/* Padding adjustments needed */ 
#navigation-aside-inner .menu > li > a {padding: 0 17px;} 
#navigation .menu > li {margin-right: 0px;padding-right: 0px}

Modify the color values (#FF0000 and #f4f4f4 ) in the code above to suit your preferences.

Preview the changes, and if you’re satisfied, click “Publish” to make them live on your website.
That’s it! Now the menu item with the custom class “highlight-menu” will have a different background color from the rest of the menu items, and the background color will change on hover.

Remember to replace “highlight-menu” with the custom class name you used in Step 1, and adjust the color values to your liking.