[Support request] Mobile header menu toggle needs to change colour

[Tania]

Mobile hamburger menu toggle is white on transparent sticky background. That is great, however when scrolling down sticky main navigation changes into white but mobile menu toggle stays white and not visible.
How could I change its colour to black on white main navigation?

I have changed on desk top but can’t figure out how to do it on mobile.

I think I need some CSS.

Please help out. Many Thanks.

[David]

Hi there,

So instead of using CSS to restyle the navigation, do this:

1. Customizer > Colors > Primary Navigation. Set the colors you want to have when the navigation is sticky or when there is no merged header element.

2. Edit your Header Element, and in the Site Header tab, enable the Navigation Colors, and change these for the merged header.

[Tania]

#sticky-navigation {
background-color: #fff;
}

#sticky-navigation .main-nav ul li a {
color: #495565;
}

I had found this above CSS on your website….when I added, it changed the colour of menu items on desktop version and also enabled the sticky navigation when scrolling down, to change its transparent background into white.

I want on mobile, the sticky navigation (I should say mobile header) and the 3 lines (hamburger menu) and word MENU, to change colour from white into black when scrolling down with/on sticky navigation(I mean mobile header) that also changes into white from transparent. I got transparent back ground by changing opacity in customiser.

I have tried through header element: site header tab, and enabled navigation colours, they only change background colour of the navigation on desktop and also the text of menu items on desktop…..it does not take any effect on mobile menu toggle (the 3 lines and menu word) they both still stay white on sticky white navigation/header background, upon scrolling down. How they could be changed into black colour when scrolling down on mobile, as we can not see them on white sticky navigation/header?

Only above CSS has worked and I need css for mobile menu toggle too to change colour.

As currently no one can see the hamburger menu on mobile header when scrolling down.

I hope it makes sense.

[Tania]

I have just noticed that the word menu appears only on mobile navigation when you are visiting the site on the real mobile itself.

It does not appear when you are looking/visiting the site from a computer in the mobile mode.

[David]

Sorry for the delay your last reply slipped past our system.
Try adding this CSS to change the menu toggle color when sticky:

#sticky-navigation .menu-toggle {
    color: #000;
}

I am seeing the Menu label on mobile device and browser dev tools ? Is that not the case for you

[Tania]

AWESOME……It has worked I can see toggle changing colour. Everything is visible.

Thanks for your help and support.

[David]

Glad to be of help!

[Author]

Posts