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.
12 Replies
Welcome to the joys of browser/device/oS inconsistencies.
Sometimes it works, sometimes it doesn't.
@CuriousMissFox what?
they're saying that device inconsistencies are an ongoing reality for developing especially mobile sites. It won't always work the same everywhere and that's unavoidable
I see.. so it's not possible?
probably not no
not beyond what you've described at least
no, and im very happy you cant change the bottom bar color
otherwise, websites like bitly could set the bar to a color that would be close to the one used by the virtual buttons, but not quite enough go flip betweeb dark/light buttons
I don't understand anything lmao
but since jo said this, which means it's not a 100% no...what's the way to like make it show
rip my grammer
on the bottom bar? you can contact the phone vendor and ask to pretty please let the bottom bar be colored too, with the meta tag
on the top bar? use what you are using and pray
the top bar works actually. I used:
<meta name="theme-color" content="#000000">
I heard this is also supposed to change the bottom but i don't see it working
the phone vendor? well I actually saw this in someone else's website which looks like some unexperienced uncle designed it. so you're saying they called the phone vendor too?
but how many phone vendors do I contact for this lmao
this is what chatgpt says, will it work?
it's not a 100% no because I don't know a way to do it, but that doesn't mean there isn't one.
What I'm saying is that it is unrealistic to do, considering the sheer volume of different android devices out there, and all the different weird browsers that exist in the world (even if most of them are webkit and chromium, stuff like the browser chrome is what makes each browser still unique).
Could you get it on the majority? Maybe, with custom JS code to detect the browser and adjust your CSS and stuff accordingly.
Will that ever be perfect? No, because I guarantee you there's some weirdo out there with an Android 4 phone with the latest Baidu browser shoehorned into it somehow.
Is it worth the effort beyond Chrome/Samsung Browser/maybe two or three more? Definitely not, and probably not even for those
Try it? 🤷
ChatGPT halucinates and will always give you an answer, even if it's bullshit. You'd be surprised how often it's suggested I use CSS properties that simply don't exist, when I was still going anywhere near AI
it's os-vendor specific
android can be customized by vendors, and some have their weird ui, like samsung has dex and their weird android thing. or oppo has coloros. and even others may do their weird things.
oh, and dont forget that apple exists too