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” />
<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.
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