- This topic has 7 replies, 2 voices, and was last updated 6 years ago by
.
I’m at a loss. The wide/desktop version of the site looks exactly how I intend it to, including a nav color change when scrolling down.
However, – in narrow view (phone, tablet, or just a resized window on desktop) the colors are messed up.
pprod site here: http://judson.julianasacademyofdance.com
this site (http://hampleinsurance.com/) from another thread is actually behaving the way I intended mine to behave, but I’m having trouble locating the settings to do so. Any help? I know it’s probably somewhere obvious….but I’m at a loss.
Hi @littlewizquinn,
I hope you are well today and thank you for your question.
Your shared site displays same colors for me on both desktop and mobile as shown in the attached screenshot.
Please advise.
Best regards,
Shufflehound teamHmm, maybe I wasn’t clear with my issue. Perhaps the attached will help.
In the two full width screen grabs, you can see as I begin to scroll, the nav is no longer transparent, and turns white in the BG…the logo and nav text change to purple from white. This is the desired effect for all devices.
Whereas in the narrow (mobile) implementation, the nav begins the same as the full width, but then once scrolling begins – the logo and menu icon turn purple – BUT the background doesn’t flip to white – so it’s difficult to read the logo and very difficult to see the menu icon.
How do I change the BG color to white when scrolling – in the narrow (mobile) version of the nav, so it behaves like the full-width version.
I have replicated this issue on many test devices…but can’t find the controller to fix. Thanks!
Solution for this topic
Thank you for making it clear.
You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#header-mobile.sh-sticky-mobile-header-active { background: #FFF !important; }Thank you! That fixed the visibility/color issue.
Last question – on the wide version the nav is “sticky” and stays at top of page when scrolling.
In narrow/mobile version – it does not. Where/How can I change the setting so the narrow/mobile version nav behaves the same at the wide version and remains at the top of the screen when scrolling?
Solution for this topic
You can use below CSS code to make it fixed on mobile on scroll.
#header-mobile.sh-sticky-mobile-header-active { position: fixed; top: 0; left: 0; width: 100%; }THANK YOU!! worked great.
You are most welcome here 🙂
