[Support request] How to change the primary navigation background color on mobile while scrolling

[Jonny]

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!

[Elvin]

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.

[Jonny]

Hi Elvin,

Hmm okay. Is it possible to have the mobile navbar stay permanently fixed and not appear even when scrolling up?

[Elvin]

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

[Jonny]

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?

[Elvin]

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

[Author]

Posts