Have you noticed that many popular sites like the with the BBC et Facebook use their own colors on the address bar of mobile browsers. Recently, one of our users informed us of his interest in this topic.

In this tutorial, we will show you how to change the color of the address bar in the mobile browser to suit your WordPress site.

Why harmonize the color of the address bar for the mobile browser?

Most WordPress themes popular are responsive on mobile. This makes your site look good on mobile devices. However, he still presents himself as a Website.

By adapting the color of the address bar to your WordPress site, it gives it the impression of a mobile application. This improves the user experience, and increases both sales and conversions.

However, it should be noted that at the moment it only works for Google Chrome browser on Android devices using Lollipop or newer versions.

Adapt the color of the address bar on the mobile browser to your WordPress theme

Just add this code to the file " header.php" de your theme or child theme just before closing </head> tag.

This line is an HTML meta tag used by Google Chrome on Android to change the color of the address bar in the mobile browser. The field of contents contains the hexadecimal code of the color you want to use as the theme color.

Don't know how to get the hex code for the color? You can get the hex value of a color using any image editing software like Adobe Photoshop, Gimp, Paint, etc.

You can also choose a color using the tools of HTML color picker. If you want to pick a color from a web page, you can use a browser extension like Colorzilla.

That's all ! We hope this article has taught you how to change the color of the address bar of mobile browsers to suit your WordPress site.

If you have any comments or suggestions, please let us know in the dedicated section.