How to Change the Color of Address Bar in Mobile Browser

by | May 21, 2018

It’s already trivial but it is still true. People are using their phones for virtually everything. From entertainment to information gathering. Thus, probably at least half of your users, are entering your website via phone. And while that certainly creates some sort of discomfort, it is a huge advantage considering the additional traffic that you will get.

There are a lot of ways to make your brand stand out. And probably, you need to take advantage of most of them.

To get there, you will have to take one step at a time.

One of the most important elements of brand building is color. And the color is not easy to master. You need to consider not only the color itself but also its hue and saturation. And once you get that right, you have to put efforts in order not to overdo it.

You can’t paint everything related to your brand with its colors.

But the address bar of your WordPress website on a mobile browser is one thing that you can easily and confidently paint according to your brand’s guidelines.

Take a look at huge websites like Facebook, BBC, and The Guardian, all of these and a lot more websites, colored their mobile browser address bars.

How to Color The Address Bar of Your WordPress Website on Mobile Browser

With the new version of WordPress which was released in November 2017, the possibility to directly change the code of the themes was highly limited. Not that it is not possible, you just have to do it via the Admin Panel, and not through the WordPress Dashboard.

If you try to edit the code, most probably you’ll face an error, which will recommend you to use an FTP by which to download the file you want to edit, to edit it locally on your computer and then re-uploading it. This is a lot of unnecessary work.

With the admin panel, you’ll be presented with our web hosting services, you won’t have to do all of this. You can just find the file you want to edit, double click it and add or remove whatever you want.

Now that we got this out of the way, let’s focus on coloring your mobile browsers address bar.

It is a fairly easy task. All you need to do is to copy the following code:

<meta name=”theme-color” content=”#327eb9” />

And paste it in your header.php file.

You need to place the code just above the closing </head> tag.

NB! #327eb9 is the HEX value of the AwardSpace’s blue color.

You’ll probably want to use your brand’s color or the color of your menu, as the menu will be right below the address bar.

In any case, if you don’t know the HEX value of your brand color or any element that you want to match with the color of the mobile browser’s address bar, you can use a color pick extensions.

Like ColorZilla, for example.   

Start your blog in less than 20 minutes!

Prices starting at 33.48€40.18€$35.88$43.06/year!
Related Posts

How to Add Disqus to WordPress

As we’ve mentioned time and time again, WordPress is highly customizable website creation solution. You are not, and never were, enforced to use one specific method to get your site to the position you want to. Let’s talk about the […]

How to Add Facebook Pixel to WordPress

If you are running any type of Facebook ads for your WordPress website, it is crucial to add Facebook pixel in order to optimize these campaigns. Facebook Pixel is similar to Google Analytics, only it is for Facebook ads. Using […]

How to Add Gravatar to Your WordPress Profile

You are almost there! You’ve created your first WordPress website. But for your WordPress experience to be full, you’ll want to add gravatar to your profile. You know, the pictures that you see next to people’s profiles all over the […]

awardspace logo
Where Ideas Turn Into Websites