Many popular websites like youtube and Facebook use their own brand colors for address bar in mobile browser. Recently, one of our users asked us if we could write about how to change the color of address bar in mobile browser to match their WordPress theme? In this article, we will show you how to change the color of address bar in mobile browser to match your WordPress site.
Matching the color of address bar to your WordPress site, gives it a native app-like feel. This improves user experience, which ultimately boosts sales and conversions.
Please note that currently it only works for Google Chrome web browser on Android devices.
Step 1: Using By html code
You need to add a
<meta> tag in your
name="theme-color", with your HEX code as the content value. For example:
<meta name="theme-color" content="#999999" />
You actually need 3
meta tags to support Android, iPhone and Windows Phone
<!-- Chrome, Firefox OS, Opera and Vivaldi -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
Step 2: Using by WordPress plugin.
There is a very easy and simple way to change address bar color in mobile browser for wordpress site is use a plugin Mobile Address Bar Changer