How To Change the Header Color On Mobile Devices


Android Header Color Change Example

Personalize and customize your website’s mobile presentation!

This tutorial will show you how to easily change the header and address bar color on several types of mobile devices.

step 1: For Chrome, Firefox OS and Opera

All it takes is a simple <meta> tag added to your site’s <head> area. It will look something like this:

<meta name="theme-color" content="#00B6D6">

The easiest way to handle this is by going to “Theme Options” and selecting the “Integration” tab. (One other option is to modify your child theme’s header.php file, but not a lot of people have that.)

You will want to make sure the “Enable header code” option is set to “Enable”.  Then you will place your meta tag into the “Add code to the < head > of your blog” section, as shown below.

Note: Do not overwrite what you may already have in that section. You can add these <meta> tags before or after your existing code.

step 2: For Windows phones

I don’t have a Windows phone to test on, but the same type of thing should apply if you want to give it a whirl.  This will require an additional, slightly different <meta> tag. Just add it in the same place as described above, on a separate line.

<meta name="msapplication-navbutton-color" content="#00B6D6">

step 3: For iOS Safari

This one is where we run into a limitation of choices. In this instance, we have only three options:

  • ‘default’ – the status bar is normal.
  • ‘black’ –  the status bar has a black background.
  • ‘black-translucent’ – the status bar is black and translucent.

Additionally, the <meta> tag to handle this won’t work unless we first set another <meta> tag. Together they look like this:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Again, you will put both of those into the <head> integration area as above. For more information on how this works and how it affects the screen, take a look (it’s pretty simple) at the Apple Dev’s page for this.

final step: Save and test

After adding one or more of these <meta> tags to your <head> integration, hit the “Save Changes” button at the bottom of the “Theme Options” page.

Then open your site on a mobile device and make sure the additions took effect. You should now be able to see custom colors in the header and address bar areas on your phone or tablet!


  1. Lucky Louis


    • Nathan Duvall

      Gracias! 😉

  2. Kelly

    Cool. I love that what you guys share is so different from what I see anywhere else! Thanks for being SUPERFLY!

    • Nathan Duvall

      Thanks for being part of our story, Kelly!

  3. Jorge

    Superb! Thanks for this cool tweak for mobile.

    • Terry Hale

      Thanks for the kinds words, Jorge!

  4. Hannah

    Great addition to a website. Never would have thought of it, but it makes the site stand out just that much more! Thanks for the tips!

    • Terry Hale

      Hannah, thanks so much for taking the time to give such kind feedback. Very much appreciated. Best wishes!


Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.