[Resolved] Menu Hamburger Colour – switch from White on Primary to Black on Sticky menu

[Ben]

On mobile devices: not using the Mobile Menu option (because the logo shrinks and is not legible)

I’m trying to get the Hamburger icon to show as “white” on the primary menu – the menu text is white
– and switch to “black” Hamburger on the sticky menu

But after hours of fiddling, I’ve only been able to achieve Either / Or – at present the hamburger is black on both Primary and Sticky menus on mobile devices:
– see https://www.elysiacharters.com

CSS Code is in the GP Child Theme

/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/
.header-wrap {
  top: 10px;
}
.mobile-header-navigation {
  padding: 10px;
} 
/* End GeneratePress Site CSS */
/* Change the TEXT colour on the Initial Hamburger Navigation */

/* Change the TEXT colour on the Sticky Navigation */
.main-navigation.is_stuck,
.main-navigation.is_stuck ul ul{
    background-color: #ffffff;
}
.menu-toggle, button.menu-toggle:focus, button.menu-toggle:hover {
  color: #000000 !important;
}

Thanks in advance for your assistance…

Kind regards
Ben

[Fernando]

Hi Ben,

If you’re wanting to change the color of the Hamburger Icon, you can change it through CSS rule fill.

For instance, here’s a CSS you can try adding to change the Hamburger Icon to white on mobile:

nav#mobile-menu-control-wrapper .menu-toggle .gp-icon svg {
    fill: #fff;
}

I can see that it’s already black for the sticky menu but if you still need code for that, here it is:

@media (max-width: 768px) {
    nav#sticky-navigation .menu-toggle .gp-icon svg {
        fill: #000;
    }
}

[Ben]

Fernando, thanks for the quick response – much appreciated.

I’ve now got the Hamburger icon doing the correct colour transition from Primary menu to Sticky Menu.

BUT in the process I have messed up the Sticky Menu text which is now white instead of black

When I add the following CSS code in Customiser CSS – it appears to work ok in the Mobile preview…
– but not in Chrome or Firefox browsers

.main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .main-navigation.sticky-navigation-transition .menu-bar-item > a, .sticky-navigation-transition .menu-toggle {
    color: #000000 !important;
}

Can you tell me what the correct CSS code should be?

Thanks
Ben

[Fernando]

Are you referring to the Off Canvas Menu Panel menu item text? This is what I’m seeing now: https://share.getcloudapp.com/yAuAxlJR

The Background is transparent, and hard to read. The color of the menu items is black though.

For clarity, can you take a screenshot of the specific Sticky Menu text you’re referring to?

[Ben]

Hi Fernando

RE: Are you referring to the Off Canvas Menu Panel menu item text?

BJK: No, not the Off-Canvas – although that’s now messed up too but I can probably fix it 🙂

Desktop or tablet: the primary menu is fine:
– but scroll a little, you’ll see that the Sticky Menu has a black logo, no visible text because its now white…

Screenshot

The weird thing is that if I’m logged in (on Opera) – the sticky menu is working ok…

Kind regards
Ben

[Ben]

Addendum: on my smartphone in ‘landscape’ view (turned sideways) using Chrome, the Sticky Menu appears, but text is not black so its invisible…

[David]

Hi there,

if this CSS:

@media (max-width: 768px) {
    nav#sticky-navigation .menu-toggle .gp-icon svg {
        fill: #000;
    }
}

Is not working on mobile landscape it is because the @media is limited to 768px. That value would need to be at least 1024px to apply to mobile landscape views.

[Ben]

Hi David

Actually, the mobile Hamburger issues was resolved. The consequence I had was the Sticky Menu in desktop/tablet etc reverted to white text.

All sorted, thanks! The fact that it worked correctly when logged in eventually penetrated…
– the WP Rocket Cache setting for “Optimize CSS Delivery” was messing up the display…

Thanks
Ben

[David]

Glad to hear that!

[Author]

Posts