Have you noticed that many popular websites use their own brand colors for the address bar in mobile browser. Have you ever wonder how it is done? Well quite easy! Check out this article and learn how to do that.
This manual is aplicable to any website no matter if it is html, Joomla!, Wordpress or any other cms system.
Why Match Address Bar Color in Mobile Browser?
Most of the themes are responsive nowdays and it is natural since it is required by all. This makes your site looks great on mobile devices. However, it still looks and feels like a website. Matching the color of address bar to your site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.
We need to mention that color address bars in time of writing of this article are working only on Chrome browser on android devices running Lollipop version and newer. We will update this article when that change.
Match Address Bar Color on Mobile Browser to Your Website
If you are adding this to Wordpress you will need to open header.php in your theme or child theme and add this code with color you prefer :
<meta name="theme-color" content="#ff6600" />This code is META TAG telling Google Chrome browser what color should address bar be.
If you are running Joomla! it will be easier since most of templates out there have sections in templates where you can insert this code in head section. If not you will need to open index.php file of your template and paste code with color you selected in HEAD section.
Color code you insert needs to be in HEX format. If you don't know how to get hex format of color you have chosen you can do that with tools like Photoshop and similar image editing tools or by opening developer console in Chrome, Firefox, Edge or similar and select css page and there color picker.
Did you know that we do things like this for our premium members? Check out our offers!
