When you visit popular websites such as Facebook and other popular sites through your mobile browser or smartphone, try to pay attention to the Address Bar section, then you will see the Address Bar has the same color as the base color of the website design or matches the brand color. owned by the website, for example when you access Facebook via a browser on your smartphone, the Address Bar will turn blue.
Then what if you want to change the color of the address bar in web browser mobile or smartphone to match the theme of your WordPress website or blog? The method is quite easy, because in this article, I will show you how to change the address bar color in a mobile browser to match the theme color of your WordPress site.
Why do you need to change the color of the address bar in a mobile browser?
Since smartphones have begun to be widely used by everyone and the easier it is to access the internet via mobile, WordPress theme developers have made theme designs that support various device sizes, which are now called responsive designs. Having a responsive theme makes your website look more professional and makes it easier for users to access the site through various devices that have different screen sizes. However, most WordPress responsive theme designs still look and feel like a website not an app.
By changing the color of your WordPress site’s Address Bar, it will give a feeling like you have a dedicated mobile app for your website. This will not only improve the user experience but also make your site look even more professional and elegant. I have also implemented this method on the blog verandalounge, I changed the color code of the mobile browser address bar as shown in the screenshot below. Or you can try to access the blog verandalounge via a browser on your android device.
Changing the Address Bar Color in the Mobile Browser on a WordPress Theme
As I said earlier to make this address bar color change is quite easy, you only need to add these three lines of code in your theme, more precisely in the header.php file before the closing tag.
For Chrome browser, Firefox And Opera
<meta name=”theme-color” content=”Hex Color Code” />
<meta name="theme-color" content="#00e7d9" />
Enter your hex color code in the ‘Content’ section of the code snippet.
For Windows Phone
<meta name="msapplication-navbutton-color" content="#00e7d9">
For IOS Safari
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#00e7d9">
To change the address bar color in a mobile browser. The content section has the hex code for the color you want to use as the theme color.
How to get the HEX color code?
You can get color HEX values easily using software or image editing software like Adobe Photoshop, Gimp, Paint, etc. For example, I want to get the color from the centerclick blog using Adobe Photoshop, so I access the centerclick blog and I print the screen, then I create a new file in Adobe Photoshop and I paste or ctrl + v on the new page. Next I click on the color color picker icon and I point the pencil-shaped cursor at the main color of the blog center, click to find the HEX code of that color. And after that you can copy the HEX color code at the bottom for you to enter in the HTML tag above.
You can also choose a color easily using the HTML color picker tool online.
If you want to pick a color from a web page, then you can use browser extensions or add-ons like ColorZilla.
And that’s an easy way to change the Address Bar color to match the colors of your WordPress theme or with a warrant of your own. Hopefully this article was useful and you should now have the appropriate color when accessing your WordPress site via a mobile browser. Good luck 🙂