[avwebmasterParticipant]

There are a LOT of selections for different objects, including all the color changes.

Where do I find the one that controls the default background color for a menu item?

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

To change background color kindly use following CSS under Custom > CSS in the Customizer:

.x-navbar {
  background-color: #ddd;
}

Note: Kindly change color code as per your requirement.

Thanks.

[avwebmasterParticipant]

Actually no, that changed the entire header background.
I’m just looking to change the MENU item background and foregrounds. I’m surprised that’s not doable from Customizer.

[John EzraMember]

Hi there,

Thanks for updating the thread and sorry we misunderstood you. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

/* menu item background and color */
ul#menu-x-demo-menu li a {
    background-color: #999999;
    color: #181818;
}

/* menu item hover background and color*/
ul#menu-x-demo-menu li a:hover {
    background-color: #ff0000;
    color: #ffffff;
}

/* sub-menu item background and color */
ul#menu-x-demo-menu li ul.sub-menu li a {
    background-color: #ff0000;
    color: #ffffff;
}

/* sub-menu item hover background and color */
ul#menu-x-demo-menu li ul.sub-menu li a:hover {
    background-color: #000000;
    color: #ff0000;
}

/* current and active menu accent, background and color  */
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: inset 0 4px 0 0 #0000ff;
/*   background-color: #ff0000!important; */
/*   color: #ffffff!important; */
}

/* example of individual menu item background and color */
li#menu-item-7046 a {
    background-color: #ffffff!important;
    color: #0000ff!important;
}

/* example of individual menu item hover background and color */
li#menu-item-7046 a:hover {
    background-color: #181818!important;
    color: #00ff00!important;
}

/* Note: to find the menu item #, you will need to right-click inspect element to see the assigned number. */

Hope this helps – thanks!

[Author]

Posts