Have you noticed that many popular websites like BBC and Facebook use their own brand colors for the address bar in mobile browser. Recently, one of our users asked us if we could write about how to change the color of address bar in mobile browser to match their WordPress theme? In this article, we will show you how to change the color of address bar in mobile browser to match your WordPress site.
Why Match Address Bar Color in Mobile Browser?
Most popular WordPress themes are mobile responsive. This makes your site looks great on mobile devices. However, it still looks and feels like a website.
Matching the color of address bar to your WordPress site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.
However, please note that currently it only works for Google Chrome web browser on Android devices using Lollipop or newer versions.
Match Address Bar Color on Mobile Browser to Your WordPress Theme
Simply add this code in your theme or child theme‘s header.php file just before the closing </head> tag.
<meta name="theme-color" content="#ff6600" />
This line is a HTML meta tag used by Google Chrome on Android to change color of address bar in mobile browser. The content field has the hex code for the color you want to use as theme color.
Not sure how to get the hex color code?
You can get the HEX value of a color using any image editing software like Adobe Photoshop, Gimp, Paint, etc.
You can also pick a color using online HTML color picker tools.
If you want to pick a color from a web page, then you can use a browser extension like ColorZilla.
That’s all, we hope this article helped you learn how to change the color of address bar in mobile browser to match your WordPress site. You may also want to see our CSS Hero review, it is the easiest way to customize your WordPress theme.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
I was able to get it done by one shot. thank you
Glad our guide was helpful
Does it takes time to update?
It can and browser caching would also delay the change as well.
Thanks a lot.
But, be aware that this trick won’t work if the user has enabled dark mode on its phone because it overrides everything else. (Some phones has an option called dark mode)
Thank you for sharing that in case someone ran into that issue
Mind-Blowing and simplest
Glad our guide was helpful
I just needed to say man,
you guys are the BEST.
Thank you, glad you like our content
Another very easy tutorial from your team!
I would like to add a gradient color to the address bar.
Is it possible?
Not at the moment with this method.
Thanks for your reply
Thank you so much:)
You’re welcome
Work very well! super easy to set up.
Thank you very much!
You’re welcome, glad our guide could be helpful
Works perfectly!
thanks
Glad our guide was helpful
Address bar color changed but text is in black, I wan it in Waite, how?
Unless I hear otherwise, that is decided by the mobile browser, not a color you set.
Thank you. Very quick and easy to do, and gives my website a rather posh look.
Glad our tutorial could help
Anyonebhelp me will it only work in Chrome and can it be used for asp.net also ?
For the moment it will only work on chrome.
If using elementor Page Builder How To Do That
It’s the same. The same process I meant, even using Elementor.
Any snippet for this?
Wonderful, it’s working for me as well. Thanks.
brilliant, 2 minute job and works a treat! Thanks
Thank you so much, that was a huge help!
It is working in android kit kat too…I think they updated chrome…
Thank you
but what about iphone and windows
Worked great for me on Weebly. Instead of messing with the code just go to settings, and drop it in the section that literally says header code. I’ve done it to two sites, now. One more to go
Very nice… and it works! But how do we get the text to to change to white?
Thanks so much! Just what I was looking and worked just the way you described its setup!
Simply add this code in your theme or child theme‘s header.php file just before the closing tag.
but it is not work in one website . why?
looks like it works on android version 5.0 and above
Great tip, worked great for my site (as your site always does) do let me know if you get the code for iphones also but either way can’t complain. Thanks!
Can this method work on newspaper 7 themes.
Exactly what I want to know
You’re rock!
hello, thanks for this tip but is that working on blogger s templates? if yes how to add it? i ve tried many times but blogger always showing error.
Awesome boss! Thanks…!!
It didn’t work for me. I was having eleven40 child theme but it is not working
Hi! It’s supported in what browsers?
Google Chrome on Android devices.
Love this! Thanks for the tip
Very applicable trick. Thanks!
This is really cool! Thanks!
Great piece of info, just changed my site.
Nice tip. Let’s figure out how to do that for all browsers on mobile.
Thanks. Much appreciated
Very informative.
Wow look simple.. i will try on my blog.
Terima Kasih