Is there a way using HTML in Chrome to change the navigation bar color in Android?

user_10823291 0
Viewed 840

I have an HTML website and I'm currently making it mobile. Is it possible to change the color of the navigation bar (at the bottom with the 3 buttons) in Android when you're in Chrome? Any help would be greatly appreciated as the white navigation bar doesn't go well with my site's navy blue theme. Thanks!

google-chrome android css html javascript
2 Answers

Unfortunately, this feature is not currently supported by chrome. Please comment in the thread if you want some movement on the issue.

user_126660760

Write a specific css file for all the rules you want to enable in a chrome browser
Add all the css rules in @media not all and (-webkit-min-device-pixel-ratio:0) Media query to enable the effects only in mobile.
Use the following javascript code to use the chrome css file:

if (navigator.userAgent.toUpperCase().indexOf('CHROME') > -1)
{
     var chromeCss = document.createElement("link");

     chromeCss.rel = "stylesheet";
     chromeCss.href = "chromeMobile.css";

     document.getElementsByTagName("head")[0].appendChild(chromeCss);
}

Refer this website for more browser specific hacks.

In case you were referring to change the color of chrome's address bar,put below code in the if statement:

var meta = document.createElement('meta');
meta.name = "theme-color";
meta.content = "";//Color code
document.getElementsByTagName('head')[0].appendChild(meta);
user_122341200
Related