How to Change the Mobile Bottom Nav Bar Color on Android (Shopify Site)
Hey everyone! I’m trying to figure out if there’s a way to change the bottom system navigation bar color (like the one with the 3 buttons or gestures) when someone visits my Shopify store on mobile.
I know <meta name="theme-color" content="#000000"> is supposed to change the Chrome address bar color, but I’ve seen that on some Android phones it also changes the bottom nav bar color—or at least blends into the page background.
I tried adding the meta tag and matching my page background to it, but the results seem inconsistent across devices. Sometimes it works, sometimes it doesn’t.
So here’s my question:
Is there a reliable way to style or influence the bottom nav bar color on mobile browsers (especially Chrome on Android) through Shopify?
Any tips, tricks, or workarounds would be awesome. Just trying to make the mobile UX feel more cohesive.
I know <meta name="theme-color" content="#000000"> is supposed to change the Chrome address bar color, but I’ve seen that on some Android phones it also changes the bottom nav bar color—or at least blends into the page background.
I tried adding the meta tag and matching my page background to it, but the results seem inconsistent across devices. Sometimes it works, sometimes it doesn’t.
So here’s my question:
Is there a reliable way to style or influence the bottom nav bar color on mobile browsers (especially Chrome on Android) through Shopify?
Any tips, tricks, or workarounds would be awesome. Just trying to make the mobile UX feel more cohesive.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
