How to change the Address Bar Color

How to change the Address Bar Color

Many websites use their brand colors in the address bar, it makes the website look unique and stand out from the rest. Usually, the address bar is often gray or white but it can be modified to reflect your brand colors and it looks colorful.

Talk is cheap, show me the code

To implement this simply add this one line of code in your <head> tag, that’s all.

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

We have used the red color here don’t forget to change it.

Pick your desired color [color picker]

Font colors in the Address bar

We cannot change the font color. However, chrome changes it depending on the color we choose light font color for a dark background and dark color font for light background.

How & Where does this work

  • Works only in mobile devices
  • Works perfectly in Chrome, Opera and Firefox

How to use this in WordPress

  1. Open your theme / child theme’s header.php file
  2. Look for the <head> tag
  3. Paste the above code between the <head> … </head> tags

For Safari

Unfortunately, Safari offers limited customization of the address bar

we can use either black or black-translucent, here’s the code

<meta name="apple-mobile-web-app-status-bar-style" content="black">

The above code applies to the status bar and makes it stick to the top.

Conclusion

Read the Official documentation, here I love this feature as this gives the user a more personalized experience what do you think? Read more such Web Development tricks from me at matrixread.com/webdev

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular posts