-
Hi there,
After recently setting a homepage header to essentially make a transparent navigation bar, I’m having an issue with my nav bar colour on mobile. Even though my navigation menu background is set to white and appears as white on desktop, it is transparent on mobile.
As possible fixes I have:
– Changed every possible colour combination in the customization settings but am getting nowhere.
– Followed instructions on this page and still, it’s not working on mobile
– Tried numerous pieces of CSS, which do work, except not on mobileCSS that worked for me on desktop was:
1.
.main-navigation.navigation-clone
{background-color:#ffffff;}2.
.sticky-enabled .main-navigation.is_stuck {
background-color: #ffffff;Could someone please give me some suggestions?
Thanks
-
Hi there,
When you edit the Header element, there should be an option called Navigation Colors that allows you to change the navigation background color. See this screenshot: https://postimg.cc/xqfgsMbQ
It should affect the display of the mobile menu as well.
-
Hey Alvind,
Thanks for the quick response.
I had tried that menu but it serves up two main problems.
Firstly, I want the nav bar to be transparent until the user scrolls on all screens (as it currently is). When I change the navigation background colour on that page, it changes everything.
Secondly, even when I do change the colour on that page, it isn’t changing the actual menu on mobile, just the menu and search icons. Example on this screenshot
-
Try this:
.main-navigation.toggled .main-nav > ul { background-color: white; } -
That has done it, thanks Ying!
-
No Problem 🙂
-
WooHoo! Ying’s answer solved the same problem I was having on my site after setting up a merged header with transparent nav. Thanks again Ying! 😊
-
You are welcome 🙂
- You must be logged in to reply to this topic.