Problem with Changing Address Bar Color on Chrome Mobile

MFBusiness15
Tourist
4 0 0

Hi friends,

 

I have been changing the address bar color on Google Chrome for mobile and I have run into an issue; I did some research and everywhere I go I run into the same code that I have to insert into the HTML header.

 

<meta name="theme-color" content="#FCFF00" />

I tried this code and it successfully changed the color of my address bar, however the color is not quite right. If you look at the address bar color on Facebook, for example, it has the blue color everywhere and a lighter shade around the url.

 

Screenshot_20200525-134134_Chrome.jpg

 

When I go to my website, however, it is all just one solid color without this lighter shade around the url.

 

Screenshot_20200525-134236_Chrome.jpg

I am completely lost as to why this is happening. Everywhere I look I see the exact same code for doing this and it works fine for everyone. I did see something on another website that said that you might have to add additional code for mobile browsers - 

 

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#FCFF00">
 
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#FCFF00">
 
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#FCFF00">

- which I have tried with no success. I have tried this with other color codes and it does the same thing, as well as putting this code in either the beginning or end of my <head> section in the theme.liquid folder. I have even tried the code with both uppercase and lowercase letters without success.

 

Any help would be greatly appreciated. Thank you in advance.

 

0 Likes
Roy96
Tourist
8 0 0

I'm having the same issue with Debutify theme. Really frustrating. The color of this bar is completely different than the color branding of my website. When I enable Debut on my store this bar adjusts automatically but not with Debutify.

Have you found a solution to this issue?

0 Likes