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.
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
You can also get hex color code from online tools given below
ColorZilla – A Browser Extension
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
Hi, great explanation! Worked fantastic on normal pages. However, I’m working with a onepage homepage with sections/divs (example.com/#portfolio). Do you think there’s a way each of those can have a colored address bar? Thanks! Janneke
Hi, do you mean each divs/sections have different colored address bar?
thanks for the post i already applied it to my site https://ngpublish.com but it seems it only works for google chrome any way to get it work on other browsers. or is there a plugin for this?
Hey,
Thanks for the post!
I just applied the code to a clients site for all devices/browsers.
However, it currently is not working on IOS/Safari.
Any advice?
Thanks,
Pete
I used the same method to change the color of the address bar of my subdomain, but it didn’t worked at all. My site is https://music.gizprix.com/ Can you please tell me what is the issue. I am using TwentyTwenty theme in it
Hello Vinayak,
Have you added the code in the head section of your subdomain site?