Change Mobile Browser Address Bar Tab Color in 1 Min WordPress

With the latest Android update, it supports browsers to change address bar color. This new feature gives rich look to a website and works best for those who specially designed their websites for mobile devices.

To view this, you can visit Facebook, Quora, and many others to view their color schemes applied to address bar which gives their website rich look.

You can view some samples below:

But many don’t aware of the fact that WordPress by default doesn’t provide this color changing option. So, to use this feature your WordPress theme should compatible with Mobile Browser. For this, your theme should either responsive or have a separate child theme for mobile devices.

There exist two ways to change the address bar color of mobile browsers.

  1. Manually placing the code inside “header.php”
  2. Using WordPress plugin

1. Manually placing the code inside “header.php”

If your theme contains any child theme, then got to child theme “header.php” or else you have to edit main theme “header.php”.

Note: Before making any changes to your header.php, make sure you should make a backup of it. Its always safe to backup your system files before making any changes to them.

Procedure:

  • Use your FTP client or open file explorer on your hosting and navigate to “WP-Content/Theme” directory.
  • Then open the theme folder which you have applied to your website
  • Inside your theme folder search for “header.php” and open it
  • Then search for <head> tag and paste following code before ending of head tag i:e; </head>

<meta-name=”theme-color” content=”#000000″>

  • Above code will reflect black theme color on your website, if you want to change it then replace the HTML color code from “#000000” to your desire one.
  • For selecting HTML color code you can visit this website.
  • Now save your “header.php” file and check your website for the effect.

2. Using WordPress Plugin

If you don’t know how to edit backend files or looking for an easy option, then “Mobile Address Bar Changer” is the plugin you should implement. Its super easy to use and does the job with one click.

Procedure:

  • Go to your WordPress Admin Panel and navigate to Plugins->Add new
  • Then search for “Mobile Address Bar Changer“, install and activate it

  • Now go to your Settings->Mobile Address Bar Changer, select color and press “Save Changes” button
  • Now your website is configured with your selected color, visit your website through the mobile browser to see the effect

 

Note: Please clear your WordPress site and web browser cache to view desire changes.

 

Latest Posts

Top 7 Best Eyelash Extensions With Reviews in 2020

Best Eyelash Extensions: Eyes undoubtedly one of the things that reflects our beauty and for this reason, we should take extra care of it....

Apple Fixes iOS Bug That Prevented Apps From Launching

Apple has fixed a bug that prevented iPhone and iPad apps from launching. The bug pertained to an issue with Apple’s Family Sharing system...

Jack Dorsey Donates $10 Million Towards Covid-19 Efforts

Twitter and Square CEO Jack Dorsey has donated $10 million to Project 100 which will give $1,000 in cash to 10,000 families who have...

7 Best Stone Frying Pans To Buy In 2020

Stone frying pans are getting popular day by day and if you are planning to buy one then this is the time. Stoneware is...

Related Articles