Archived topic

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

5 replies · Started by Bill on September 24, 2020

Viewing posts 1–6 of 6

September 24, 2020 at 2:01 am #1456544

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

September 24, 2020 at 3:44 am #1456678

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.

September 24, 2020 at 5:59 am #1456821

Hi David

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

Thanks

Bill

September 24, 2020 at 7:05 am #1456890

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.

September 24, 2020 at 9:20 am #1457276

Hi David

Perfect - color changed thanks.

Regards

Bill

September 25, 2020 at 12:59 am #1458041

You're welcome

This archived topic is closed to new replies.

Start building better websites today.