[Resolved] Mobile Menu navigation button background color

[Fernando]

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. 🙂

[Ivars]

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

[Fernando]

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

[Author]

Posts