How To Change The Browser Mobile Address Bar Color In Divi Tutorial by Pee Aye Creative

How To Change The Mobile Address Bar Color In Divi

Nelson Miller Pee Aye Creative
This fun quick Divi Pro Tip will show you how to change the color of the mobile address bar which shows on Android devices using the Chrome browser.

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!

Divi Responsive Helper by Pee Aye Creative 2.3

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.”

Set the mobile address bar color in Divi for Chrome on Android devices

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!

Divi Responsive Helper by Pee Aye Creative 2.3

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

  1. Danilo

    The code doesn’t seem to work

    Reply
    • Hemant Gaba

      Hi Danilo!

      Thank you for bringing the issue to our attention. We will check the code with current Divi version and update soon!

      Reply
  2. Lincoln

    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?

    Reply
    • Hemant Gaba

      Hi Lincoln!

      Thank you for bringing the issue to our attention. We will check the code with current Divi version and update soon!

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart