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
Code to Change the Color of your site address in Chrome and Firefox
for example,
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/.