How To Change The Color Of Address Bar On Mobile Browser

Change The Color Of Address Bar On Mobile

There are lots of web sites , web pages in the web.Did you notice that some websites like Facebook  normally use their own brand colors for the address bar in mobile browser .This will give 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 the 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 little things for clear of your any confusion.Here’s  method  for Google Chrome browser on the Android platform. Also it should be  Lollipop or higher version of your Android version. It will be a latest update of Android.

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

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

 

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 second method. First, Go to Appearance in the dashboard and go to “Editor” There are All PHP Files. select Header.php.

Change The Color Of Address Bar On Mobile
Change The Color Of Address Bar On Mobile using Codes
  • For Google chrome on Android Platform

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

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

  • For Firefox,Safari,Internet Explorer & Opera On Windows Platform

Type Below Code in Header.php before the </head> 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" >    

 

  • To 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" >

 

2. By Installing WordPress Plugin

There are lot apps pluggins to Change color of your 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
Change The Color Of Address Bar On Mobile By Plugin

Installation

  1. First you should download plugin file to WordPress content/plugin directory or just click, install in WordPress plugin page.
  2. Now you active the plugin.
  3. After that Go to appearance menu > Mobile Browser Address the color.
  4. Now Select the color  that you want to add.
  5. After click on save change.
  6. Get your new experience.

 

If It Is Not Working

Most probably it may be a simple mistake or something. Sometime you are using unsupported browser like Opera, Safari. As a solution for then problem,You can try it on Chrome. If still not working , you can hire our team, then one of our member Will help you.

Leave a Reply

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