Mobile Menu navigation button background color

I see. Thank you for adding a screenshot to help us understand further.

If that’s the case, here is a code you may try instead of the one I provided:

#mobile-header.main-navigation.toggled .main-nav ul li:not([class*="current-menu-"]):hover > a {
    background-color: var(--accent-2);
    color: var(--contrast-3);
}

#mobile-header.main-navigation.toggled .main-nav ul li.current-menu-item > a {
    background-color: var(--accent-2);
}

#mobile-header.main-navigation.toggled .main-nav ul li:not([class*="current-menu-"]) > a {
    background-color: var(--accent-3);
}

nav#mobile-header.toggled.main-navigation .main-nav ul li > a {
    display: inline-block;
    margin-top: 10px;
    line-height: 20px;
    border: solid 1px var(--contrast);
}

nav#mobile-header.toggled {
    height:100%;
    background-color:transparent;
}

nav#mobile-header.toggled ul#menu-primary-1 {
    background-color:transparent;
}

nav#mobile-header.toggled span.gp-icon.icon-menu-bars {
    background-color: var(--accent-3);
}

Kindly replace accent-2, accent-3, contrast, and contrast-3 in the code with the colors of your preference. These colors come from the Global colors in the customizer. You may add new colors as such: https://share.getcloudapp.com/WnuyAe8l

The CSS Variable Name is the one you’ll be using to replace the one I mentioned. You may also set the opacity here: https://share.getcloudapp.com/GGul0Pw7

Kindly replace line-height 20px as well to your preferred Menu item height.

Hope this adheres to your specifications. Kindly let us know. :)

Hi Fernando,

That solution is fantastic. I have adjusted the colors and left the spacing as it was.

The website is now active with these new changes.

Ivars

You’re welcome Ivars! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)