How to Change the Color of Address Bar on Mobile Browser: Chrome

Did you see matched-color in the address bar while browsing any website like Wikilogy? Nowadays many websites like Facebook, Wikilogy, use color in the address bar to match their brand. Do you want to know how to change the color of the address bar in google chrome or any browser? In this tutorial, I will share how to change the color of the address bar in the mobile browser to match your WordPress site.

Why Should You Change The Color of Address Bar?

If you change the color of the address bar in your WordPress site, it will look impressive in the mobile browser. Changing the color of the address bar will attract visitors. It’s user-friendly like using a native mobile app. Besides, changing the color will increase UX (User Experience).

How to Change the Color of Address Bar in Google Chrome?

Let’s see how to change the color of the address bar in google chrome. Before making any changes, please generate a backup file of your WordPress site.

Change Address Bar Color by Adding Meta Tag in Header.php

To change the color in chrome, follow the instruction given below:

• Log in to your WordPress site
• Focus the mouse on ‘Appearance‘ & click ‘Theme Editor‘ from the left navigation menu
• Click ‘header.php‘ from the ‘Theme Files‘ on the left side.
• Add the following meta tag just before the closing tag.
• After all, click ‘Update File‘ & follow the rest of the instructions.

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

The 6 digits hashtag code (#93b874) refers to the color code. Simply replace the code. To pick the color click HTML color code picker. If you want to choose the color from uploading an image file or from a website, go to Color Picker.

However, the above meta tag is only for google chrome and some browser. To add in other browsers like iOS, Safari, Windows, simply add the following meta tags. Add the code in header.php

For the Apple operating system:

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="93b874">

For the Windows operating system:

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

If you cannot add this meta tag, do it from Cpanel. Go to Cpanel> File Manager> public_html> wp-content> themes > Your Theme > Header.php

If this doesn’t work in your theme, follow the 100% working method. Here I will provide both manual & auto by using a plugin.

Change Address Bar Color by Adding Function in Function.php

This is a simple method that will obviously work. Follow the following steps.

• Log in to your WordPress site
• Focus the mouse on ‘Appearance‘ & click ‘Theme Editor‘ from the left navigation menu
• Click ‘function.php‘ from the ‘Theme Files‘ on the left side.
• Add the following function just after the
• After all, click ‘Update File‘

// Address bar color in mobile
function wikilogy_mobile_address_bar() {
	$color = "#93b874";
	//this is for Chrome, Firefox OS, Opera and Vivaldi
	echo '';
	//For Windows Phone **
	echo '';
	// For iOS Safari
	echo '';
	echo '';
}
add_action( 'wp_head', 'wikilogy_mobile_address_bar' );

If you cannot add this function, do it from Cpanel. Go to Cpanel> File Manager> public_html> wp-content> themes > Your Theme > Function.php

Change the WordPress Address Bar Color by Adding Plugin

In this way, you don’t have to change a lot. Just install the plugin Color Mobile Browser Address Bar. After installing, activate the plugin and go to setting. After that add the Hex HTML Color code. That’s all.

I hope you can successfully change the color of the mobile address bar for your WordPress site.