How to Change the Color of Chrome Header Bar on Android with Divi

You may not know that it is possible to easily change the standard white color of the Chrome browser header/address bar on Android mobile devices to your own custom color. Just check these two screenshots below. The one on the left is the original Chrome address bar color and the one on the right is a custom one.

 

 

I’m sure you will agree with me that the example on the right looks much better because you can match the color of the header bar with your website’s color scheme. By matching the colors, you can achieve a better UX for your website.

Now, if you wonder how you can do this, read on. It is pretty simple. The only thing that you need to do is to add a line of custom CSS code to the Divi Theme Options in your WP admin panel.

So, to apply this trick, just add the following CSS code to Integration > Add code to the HEAD of your blog:

<meta name=”theme-color” content=”#8e8e8e” />

NOTE: Make sure that the “” characters in the shortcode are copied correctly and are not “” or ¨¨, because it may not work.

 

 

Don’t forget to replace the color code #8e8e8e with your desired color.

However, please note that this works on Chrome on Android smartphones only. It does not work on iPhones, nor in Safari or other browsers. But still, it is a nice feature to have.

I hope you will find this small tip helpful.

And you might also like to check out my other article on how to change the Divi accent color on one particular page.