How to Change The Color of Address Bar in Mobile Browser

Do you want to change the color of your site address bar in mobile? Many popular sites and blogs are using this tricks to change the color of address bar so that in a mobile browser, it looks like a mobile app. In this post, we share some best method to apply this technique to your blog and website.

Designing and color combination is also the most important part of a blog or website to success. Address bar color convert website into native app designs. It does not have any significance but makes your blog eye-catching.

Full Disclosure – This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (No additional cost to you).

Want to Change the Address Bar Color, Why?

In the present scenario, almost all the wordpress websites are mobile responsive and when we open these mobile responsive websites in the mobile browser, it looks awesome but waits, these still look like a website.

Therefor chrome and other popular web browsers (not all) give the option to change the color of address bar so that it appears like the native mobile app. take the image below to understand it in a better way.

Change address bar color

Step to Change Address Bar Color Using Meta Tag

In this method, you need to put a snippet of code in your site HEAD section. Copy the code given below and paste it into the <head></head> section of your theme.

Don’t edit directly your theme files (in wordpress, header.php where you will find <head></head> section). To accomplish this task, install Insert Header and Footer wordpress plugin. Just copy the code from below and paste in plugin head editor and hit save. The main benefit of this plugin is, whenever you change your wordpress theme, this code will never disappear.

For Chrome, Firefox And Opera

<meta name=”theme-color” content=”Hex Color Code” />

for example,

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

Put your hex color code in the ‘content’ section of the code snippet.

For Windows Phone

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

For IOS Safari 

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

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

Now with these code snippet, you are capable to change the address bar color in the mobile browser and make it looks like the native app.

Tips to Increase Page Views and Reduce Bounce Rate In WordPress

Where to Find Hex Color Code?

Want to know where to get hex color code. Open Photoshop or any photo editing tool you use for image processing. Open color picker and select the color mode HEX or Hexadecimal. Now you can choose your color in hex code. See the image below I took it from Photoshop

address bar color picker hex code

You can also get hex color code from online tools given below

ColorZilla – A Browser Extension

HTML Color Codes

Color Picker By WebpageFX

W3 School Hex Color Picker

Change Address Bar Color Using WordPress Plugin

Another method to accomplish this task is using wordpress plugin. There is a wordpress plugin for wordpress repository named Color Mobile Browser Address Bar, which can do it easily for you.

After installing this plugin, you need to go Appearance > Mobile Browser Address Bar Color in the wordpress dashboard section.

Now select a color using inbuilt color picker and hit the save button. Now you have done!

I hope you like this post, Check out OceanWP + Elementor Package for taking your wordpress blog and site to the next level.

Must read these posts which will be very helpful for you

10+ Essential Tools Must For Every Professional Website

Latest Hosting Coupon And Deals- Best Hosting Offers And Discounts

Setup Blog Checklist – Facts Behind A Successful Blog

Get More Cool Stuff

WordPress, SEO & Link Building, Marketing, Blogging Tips, Once a Week.

We never spam your inbox. Unsubscribe at anytime.

WPYard

Web Developer since 2013. Blogging since 2017, I like watching movies in my free time. Traveling around the world is my next dream and I am looking for an opportunity to start my travel journey in the right direction.

Leave a Reply

Close Menu