Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

59 CommentsLeave a Reply

    • You would want to check with the support for your specific theme that thee is not a different header styling being assigned to those pages.

      Admin

  1. First of all thank you for this great tutorial but now I’m facing a problem the address bar color is not showing on the homepage of my site. It’s perfectly showing on all pages and posts of my site except my homepage.
    What should I do now? Please help!

    • You may want to check with the support for your specific theme that it is not set on the homepage template that could be overriding your settings.

      Admin

  2. 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)

  3. Another very easy tutorial from your team!

    I would like to add a gradient color to the address bar.

    Is it possible?

    • Unless I hear otherwise, that is decided by the mobile browser, not a color you set.

      Admin

  4. 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

  5. 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?

  6. 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!

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

Leave a Reply to WPBeginner Support Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.