- This topic has 8 replies, 3 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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 menuBut 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.comCSS 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
BenCustomer Support
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
BenAre 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
BenAddendum: on my smartphone in ‘landscape’ view (turned sideways) using Chrome, the Sticky Menu appears, but text is not black so its invisible…
Customer Support
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
BenGlad to hear that!
- You must be logged in to reply to this topic.
