How To Change the Header Color On Mobile Devices

by

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!

4 Comments
  1. Lucky Louis

    Excelent!

    Reply
    • Nathan Duvall

      Gracias! 😉

      Reply
  2. Kelly

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

    Reply
    • Nathan Duvall

      Thanks for being part of our story, Kelly!

      Reply

Submit a Comment

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