Match Your Website To Your Brand
Customize The Mobile Address Bar Color In Your Divi Website
Your website is a reflection of your brand, so it’s nice to have all your colors match and stand out. One way to do this is to customize the mobile address bar color for your uses who are using Android devices, like me. (I have been told it works on other devices and browsers now, but have not verified it) This is something I do on every site I create, and it looks really nice! In fact, even the big-name websites like Facebook do this, and since it only takes a minute, there’s no excuse not to add this.
FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Copy And Paste This Snippet
All you have to do to change the mobile address bar color on your Divi website is to copy and paste this simple snippet below into your Divi website. So go ahead and copy it now, and then pull up your website.
<meta name="theme-color" content="#ff6600" />Now once you have that copied, go to your website to the Divi Theme Options. Look for the Integration tab, and paste the code snippet into the first section labeled “Add code to the < header > of your blog.”
Replace The Color
Of course, you will want to change the hex color to something else. Find the color that best matches the brand, and replace the 6 digit hex color with your own.
Preview The Result
Now go check your site on an Android device with Chrome browsers. I have also been told it works on other browsers like Safari on iMac, but I do not have any to test, so let me know. This is a really nice touch, and really shows how you can go the extra mile for your website or client website.
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
The code doesn’t seem to work
Hi Danilo!
Thank you for bringing the issue to our attention. We will check the code with current Divi version and update soon!
Heya, this only seems to work when the address bar on mobile is compressed when scrolling down. It reverts to the standard theme when the address bar isn’t compressed, as in scrolling up. Is that normal?
Hi Lincoln!
Thank you for bringing the issue to our attention. We will check the code with current Divi version and update soon!