Color of dropdown/submenu text in sticky topbar (for tablets etc.)

vrzacek · August 2016

Hello, is there any way to have different text color for sticky submenu/dropdown item for lower resolutions (max-width: 1239 px)?

On our site http://www.assembly-czech.cz/wp we have blue background for sticky top bar with white text, but in responsive sticky top bar it shows dropdown also with white text (invisible on dropdown background, I want to apply #878786 there).

Thanks for help.

Albert · August 2016

Hi,

you can change this background for mobile devices with the following css:

#Top_bar #menu { background: #000 !important; }

vrzacek · August 2016

Well, but if I want to change color of text (of dropdown menu on sticky top bar on mobile devices) instead of color of background? Simply don't want to inherit the color of text from main menu level of sticky top bar menu text, I want to have sticky top bar with blue background and white text and submenu of sticky top bar with dark grey text on white background?

Thanks

Albert · August 2016

If you prefer to change sub-menu text color instead of background, then you need to use the following css:

#Top_bar.is-sticky #menu ul li a { color: #000 !important; }

vrzacek · August 2016

Now submenu is okay, but this code is changing also the color of first level menu of sticky topbar and it's problem again.

Topbar over 1240 px = OK

Topbar up to 1239 px with submenu = OK

Topbar sticky over 1240 px = FAIL - need white color of text here

Topbar sticky up to 1239 px with submenu = OK

Is there any way how to change the color of text for sticky top bar first level only?

Albert · August 2016

So to change items color on sticky top bar over 1240px, please use:

@media only screen and (min-width: 1240px) {
    #Top_bar.is-sticky #menu ul li a { color: #FFF !important; }
}

vrzacek · August 2016

OK, thanks for help.

Albert · August 2016

You're welcome!

Color of dropdown/submenu text in sticky topbar (for tablets etc.)

Comments