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.
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.
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.
or just got HTML school website and find out your color code.
thank you sir, its really working and easy to setup