Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Change the Color of Address Bar in Mobile Browser to Match Your WordPress Site

Last updated on by
Special WordPress Hosting offer for WPBeginner Readers
How to Change the Color of Address Bar in Mobile Browser to Match Your WordPress Site

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.

Address bar color in mobile browser for 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.

Color address bars in mobile browser on Android

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.

Color picker in Adobe Photoshop

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.


Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. zakaria says:

    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.

  2. Saikot Hc says:

    Awesome boss! Thanks…!!

  3. Xaif says:

    It didn’t work for me. I was having eleven40 child theme but it is not working

  4. Queven says:

    Hi! It’s supported in what browsers?

  5. Terri says:

    Love this! Thanks for the tip

  6. dhiravat says:

    Very applicable trick. Thanks!

  7. Alessio says:

    This is really cool! Thanks!

  8. Gerard Jimenez says:

    Great piece of info, just changed my site.

  9. Bobby says:

    Nice tip. Let’s figure out how to do that for all browsers on mobile. :-)

  10. Shu says:

    Thanks. Much appreciated :D

  11. jehangir says:

    Very informative.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.