Programming WordPress

How to match Address bar Color to Brand Color on Mobile Browsers

Changing Address Bar Color in Browser

Mobile Browsers unlike their desktop counterparts let you customize the browser’s address bar  color to match your brand’s color. Matching your address bar with your brand color or your website’s color scheme provides a more immersive user experience.

Most popular websites like Facebook, BBC or The Guardian when loaded in a mobile browser have a matching address bar color to their website’s color theme.

Change the Address Bar Color

Matching your address bar color to the website theme color gives it the look of an app as the address bar automatically changes color when the website is loaded in a mobile browser.

Change the color of the address bar to match your brand color

To enable this feature you just need to add a line of code to your websites pages which tells the browser to change the color to the one specified by your theme.

To do this on a wordpress site you would have to add this code in your theme or child theme‘s header.php file just before the closing </head> tag.

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

The theme-color meta tag ensures that the address bar is branded when a user visits your site as a normal web page. Set content to any valid CSS color value. You need to add this meta tag to every page that you want to brand.

You can search on Google for “Hex Color Picker” which would open the color picker. Select the desired color and then copy its hex code. Replace the hex code with your color code.

Hex Color Picker Google

For example if you want you site address bar color to be red then paste the following code inside the <head> tag of your website.

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

For Windows Phone

<meta name="msapplication-navbutton-color" content="#ff0000">

For IOS Safari

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="#ff0000">

Place all the code after changing the content color to you desired color, inside the html head tag of you site. WordPress websites can put the code inside their active theme’s header.php or you can place the code inside the child theme’s header.php

After making these changes, your website would load with address bar color of your choice.

Leave a Reply

Your email address will not be published. Required fields are marked *