Do you want to change the color of your site address bar in mobile? Having seen multiple popular sites and blogs doing this, I was keen to figure out how to do this.
Changing the color of the address bar can make your blog or website more eye-catching to the user. If your brand or website has a default colour/theme colour, changing the color of your site address can help reinforce both branding and help you differentiate.
Considering how easy it is to do this when using WordPress as your CMS, I am surprised this trick isn’t more commonly used.
In this blogpost I will show you how to do this for both Chrome, Firefox and Safari.
Simply add this code in your theme or child theme‘s header.php file just before the closing tag;
<meta name=”theme-color” content=”Hex Color Code” />
i.e. paste the code below anywhere above
</head>
Code to Change the Color of your site address in Chrome and Firefox
for example,
<meta name=”theme-color” content=”#05bcbf” />
Code to Change the Color of your site address For IOS Safari
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”#05bcbf”>
Where to Locate your theme’s header.php file?
In wordpress the easiest way to locate this file is to go to Appearance > Theme Editor > header.php/.
How to Find Hex Color Code?
The easiest way to find a hex color is to right click and inspect an element on the page as shown below;
However, you can also pick a color using an online HTML color picker tool or even use a browser extension such as ColorZilla. And if you are super lazy, you can always download the color mobile browser plugin to insert the code above for you.
But you are not super lazy or void of the theme editor above and you are going to try the method I showed you above 😊
Hope this helps, let me know in the comments below.