Archived topic
Menu Hamburger Colour - switch from White on Primary to Black on Sticky menu
8 replies · Started by Ben on November 23, 2022
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
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;
}
}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
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?
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...
The weird thing is that if I'm logged in (on Opera) - the sticky menu is working ok...
Kind regards
Ben
Addendum: on my smartphone in 'landscape' view (turned sideways) using Chrome, the Sticky Menu appears, but text is not black so its invisible...
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.
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
Glad to hear that!
