Change the color of address bar of mobile web browser based on site color

Change the color of address bar of mobile web browser based on site color

September 21st, 2019 Shabu James 1.8K Views 0 Mobile Design1 minute, 19 seconds

Nowadays it’s important to make website’s mobile friendly because around 65% of users browsing websites are from mobiles. In this tutorial we will be showing you how to change the address bar area color matching the website. For matching the address bar and the website what we have to do is just add the below code to your HTML page inside the head session .

(i.e) Inside <head>

Below is the code which needs to be added to the head session. Replace “Your color code” with your color code (i.e) #000

<meta name="theme-color" content="Your color code">

The perfect example is below.

<!-- Chrome, Firefox OS and Opera -->
<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">

Hope this tutorial help you. If you have any doubts you can place a comment. Happy blogging.

Tagged under

About The Author

Shabu James

Leave Your Thoughts Here...

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.

Name *
Comment

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.