Archived topic
How to change the primary navigation background color on mobile while scrolling
5 replies · Started by Jonny on April 25, 2021
Hello,
On mobile, when scrolling down on a page/post my logo and primary navigation bar/header stay fixed which is fine, but when scrolling back up on the page the logo and menu bar appears though it has a clear color background and because my navigation items (hamburger, search icon, logo) are the color white, it's difficult to see.
Is there a way I can change this background color on mobile only?
Many thanks in advance!
Hi there,
This is quite tricky to do. This will require custom scripting and that's outside of our scope, unfortunately.
But to help out, check out contrast.js.
https://www.npmjs.com/package/contrast-js
This script calculates the appropriate contrast between texts and its background.
Hi Elvin,
Hmm okay. Is it possible to have the mobile navbar stay permanently fixed and not appear even when scrolling up?
Hmm okay. Is it possible to have the mobile navbar stay permanently fixed and not appear even when scrolling up?
If you're using the mobile header on Appearance > Customize > Layout > Header, there's an option to keep it fixed.
Uncheck "Hide when scrolling down".
https://share.getcloudapp.com/X6ueQB6l
Ok I see this option but actually, what I meant was, can the navbar on mobile just stay permanently at the top of the page out of sight completely once a user scrolls down on the page?
Ok I see this option but actually, what I meant was, can the navbar on mobile just stay permanently at the top of the page out of sight completely once a user scrolls down on the page?
Turn off Sticky. :)
https://share.getcloudapp.com/E0uYZl2n
