How To Change The Color Of Address Bar On Mobile Browser

There are lots of web sites, web pages on the web. Did you notice that some websites like Facebook normally use their own brand colors for the address bar in the mobile browser? This will give an attractive and fresh look to web browsers. Someone may have a problem that “Change The Color Of Address Bar On Mobile/ set the color of the address bar /status bar in mobile browser to match my site?” Also to make sure that you take note of your WordPress site, Here some tricks that you can try out. Did you know it possible to do it easier you’d think? We will see how to do that.

We’ll point out little things for clear of your confusion. Here’s the method for the Google Chrome browser on the Android platform. Also, it should be Lollipop or higher version of your Android version. It will be the latest update on Android.

Mainly we can change browser tab color in separately two ways,

Changing the child theme in “header .php” file
By installing a WordPress plugin

Method 1:

Changing Child Theme

Please be careful because now you are going to edit your Theme File. If you are not sure what are you doing please go to the second method. First, Go to Appearance in the dashboard and go to “Editor” There is your All PHP Files. select Header.php.

Change The Color Of Address Bar On Mobile Browser

For Google Chrome on Android Platform

Type Below Code in Header.php before the </head> Closing tag and Save it

<meta name="theme-color" content="#FF00FF"/>just before the closing >

There are some IOS specific styling – Firefox, Safari & Opera

Type Below Code in Header.php before the </head> closing tag. and Save

<meta name="msapplication-navbutton-color"content="00FFFF" >

There are some IOS specific styling – Firefox, Safari & Opera

To hiding Safari User Interface Components

Type Below Code in Header.php before the </head> tag. and Save

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

Changing the Status Bar Appearance

Type Below Code in Header.php before the </head> tag. and Save

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >

Method 2:

By Installing WordPress Plugin

There are a lot of plugins to change the color of the User’s address bar. We can recommend “Chrome Theme Color Changer” by installing this plugin you don’t need to modify theme files and you can use color picker for select address bar color through using this plugin.

Change The Color Of Address Bar On Mobile By Plugin

Installation

Go to Plugins -> Add New –> type “Chrome Theme Color Changer” and Download it.
Now you activate the plugin.
After that Go to appearance menu > Mobile Browser Address the color.
Now select the color that you want to add.
After, click on save the change.
Get your new experience.

Connect with us

We would like to hear about your problems, questions, and suggestions. So feel free to contact us. This is free of charge service that we offer. But we receive thousands of emails per day. So it is impossible to reply to all of them. So we create a Community to help you individually. go to Community and open help Topic under Android. Please spread this post to your friends by sharing Facebook and other major social media. And make sure to like us on Facebook.