[Resolved] Sub menu background color, mobiles, using css and an Elements merged header

[Bill]

Hi there

I can’t change sub menu background color using css and an Elements merged header when targeting mobile devices. I use css to change the colors of all of the menu items but can’t just target the sub menu background colors.

I have tried a lot of permutations along the lines of:

.main-navigation .sub-menu .toggled-on ul {
background-color: #5e6987;
}

But I am not able to target just the sub menu background color. Is this possible, if so what would the css be?

Thanks

Bill

[David]

Hi there,

you should be able to use this CSS selector: .main-navigation .main-nav ul ul

If thats not working provide a link to the site so i can check.

[Bill]

Hi David

I think I tried that combination, either way tested again and no change. The site link is below.

Thanks

Bill

[David]

So currently those colors are being set by the Customizer > Colors > Primary Navigation.

If you want to override them when the header is merged then you can use this CSS:

.header-wrap .main-navigation .main-nav ul ul {
    background-color: red;
}

Make sure to clear any plugin/browser caches.

[Bill]

Hi David

Perfect – color changed thanks.

Regards

Bill

[David]

You’re welcome

[Author]

Posts