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

Many time you go to the different website in the Google Chrome mobile browser and ever imagine that how the color of mobile browser header and address bar get changed? How it automatically adapted the color of a website theme? If you have not noticed it yet then go and open some popular brand websites such as Facebook.

Right now this color adaptation feature is only available in Google Chrome browser and today in this article we will show you how to change the color of chrome browser’s header or address bar to match your WordPress website theme color.




What is the benefit of customizing Google Chrome’s Nav Bar Color To Match your WordPress website?

how to change the color of address bar in google chrome windows 10 How to Change the Color of Address Bar in Google Chrome

Nowadays, almost every WordPress theme is mobile browser compatible and responsive too, which helps to reduce the website loading speed. Also, due to the responsiveness of the themes, they look great on mobile devices such smartphones and tablets.

Now, to match the color of the Chrome browser header to the website theme color is important because it leaves a brand image on your audience.

When the mobile browser adapts the WordPress website theme color then it gives a feel of using a native app.  This automatically triggers a trust in the subconscious mind of a person and ultimately boost your sales.


Easiest Way to Color Your Mobile Browser Address Bar in WordPress

Step 1: Go to your WordPress Dashboard and Appearence->Editor-> select your current theme.

Step 2: Select the header.php file from right side file php file listing.

Step 3: Now click in the editor and press ctrl+F and find out the </head>. It is a header section closing tag.

Step 4: Once you find that code then just before it placed the following code:

<meta name="theme-color" content="#ff6600" />

You can refer to the given screenshot.

adding wordpress theme color to your mobile chrome browser header


Step 5: In the above-given code the #ff6600 is the orange color that is on our website. Now to find out the color of your website either you can press ctrl+shift+I or right and click on inspect to find the color code of your theme.

Find out the website color code

How to find out the color code of your website

or just got HTML school website and find out your color code.

1 thought on “How to Change the Color of Address Bar for WordPress Site in Mobile Browser”

Leave a Comment

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