How to Customize Your Divi Website Scrollbar

by | Nov 2, 2020 | DIVEMBER, Divi Tutorials | 53 comments

Welcome to D I V E M B E R (Divi + November) here at Divi Life! All month long during November we’re going LIVE on Facebook & YouTube, and publishing new tutorials, freebies, new product features, new product releases, and more! Make sure you subscribe to our email list so you don’t miss any of the action or awesome free stuff! And, follow us on Facebook & YouTube to be notified when we go LIVE.

Have you ever been to a website and noticed the website has a big, bold, colorful scrollbar instead of the boring default browser scrollbar?

It’s actually just a few lines of custom CSS to completely customize your website’s scroll bar!

So why would you want to create a custom browser scrollbar for your Divi website?

The answer is branding!

In this day in age, branding is everything! Any extra things you can do to further yours (or your client’s) brand on the website, is a huge win.

You want website visitors to remember you, and an extra subtle dose of some razzle dazzle can definitely help with that.

Below you can see an example of what a customer browser scrollbar looks like. Let’s Get Started!

The CSS to Customize Your Browser Scrollbar

Here’s the CSS! As you can see, it’s not very much. You can copy this CSS and place it in one of the following places:

  1. In the Custom CSS Box in Divi Theme Options
  2. In your Child Theme’s Style.CSS File (learnΒ how to create a Divi Child Theme, if you don’t know already)

Note: You can place the custom CSS into a single page’s custom CSS box. It won’t work. It needs to be in Divi Theme Options custom CSS box, or the style.css file of your child theme. If you want to add it to a single page, see below.

The CSS above is well commented so you can see what to customize to fit your own color scheme and branding.

It’s worth noting that you do not need to have a gradient scrollbar like our example. Instead, you can remove that line as instructed in the comment, and keep the background color.

 

How to Add the Custom Browser Scrollbar to a Single Page

In some cases, you might not want the custom browser scrollbar site wide, but instead on a singe page. In fact, that’s exactly what we did. We added a custom browser scrollbar on our All Access Pass membership landing page that matches the branding of our membership, but didn’t put one for the rest of our site.

To do this, you simply need to target the custom CSS page classes that WordPress generated for the page you want to use.

For example, every page has a unique ID, and WordPress generates a CSS class for this page. To find the page ID, go to “Pages” from WP Admin, and click on the page you’d like to add the scrollbar to. Then, look in the URL bar and you’ll seeΒ ?post=1234&action=edit in the URL. The number is the page ID.

That’s it, we’re done!Β 

Easy, right?

53 Comments

  1. Avatar

    Replay, Manchester UK

    Reply
    • Avatar

      Thanks so much, Tim! It doesn’t sound too hard. Lol! I’ve been enjoying your YouTubes! Keep up the awesome work!

      Reply
  2. Avatar

    Replay, Bournemouth UK πŸ™‚

    Reply
  3. Avatar

    This came at the right time. I am having this added to my next project.

    Reply
    • Avatar

      That’s great to hear, Mark!! I’m so glad the timing worked out πŸ™‚

      Reply
  4. Avatar

    Watching from Portugal.

    Great jobs.

    Thanks

    Reply
    • Avatar

      Thanks for watching, Bernardo! πŸ™‚

      Reply
  5. Avatar

    Replay, Glasgow, Scotland

    Reply
    • Avatar

      Thanks for watching, Gordon. Stay tuned for more epic stuff all month long πŸ™‚

      Reply
  6. Avatar

    Thanks Tim, Good vid πŸ™‚
    Is it my Firefox? It seems not to be be working. Tried on my workstation and laptop πŸ™

    Reply
    • Avatar

      Hi Chook,

      Thanks for watching. No, it’s not just you. Custom scrollbars don’t currently work on Firefox unfortunately. They supposedly have added limited support, but I haven’t been able to get it to work.

      Reply
  7. Avatar

    Replay on the site from the Blue Ridge Mountains.

    Reply
  8. Avatar

    Nice job. I’ve been using this on client sites for that extra touch for a while now. But the gradient adds an even cooler flare.

    Reply
    • Avatar

      Yeah the gradients are awesome! πŸ™‚

      Reply
  9. Avatar

    Replay, From the Netherlands

    Reply
  10. Avatar

    Replay – Tweed Heads, Australia 😊

    Reply
    • Avatar

      Glad you stopped by Emma! πŸ™‚

      Reply
  11. Avatar

    Reply from Australia πŸ™‚

    Reply
    • Avatar

      Thanks Bec for watching πŸ™‚

      Reply
  12. Avatar

    Work only on Chrome ?

    Reply
    • Avatar

      I’ve also noticed that after I applied the change, it only worked on Chrome.

      Reply
      • Avatar

        It should work in all browsers except Firefox. Firefox does not support custom scrollbars although they’re supposedly adding support for it.

        Reply
    • Avatar

      It should work in all browsers except Firefox. Firefox does not support custom scrollbars although they’re supposedly adding support for it.

      Reply
  13. Avatar

    Hey Tim, this is super cool. I really like this feature! Thanks

    Reply
    • Avatar

      Glad you like it, Wilfred πŸ™‚

      Reply
  14. Avatar

    Thanks Tim,

    Much appreciated. Nice addition to the tool kit for when that extra je ne said quo is needed.

    Reply
  15. Avatar

    Thanks for sharing this Tim, that’s a really nice touch and so simple when you know how πŸ™‚

    Reply
  16. Avatar

    Thanks!

    Reply
  17. Avatar

    Replay. Connecticut. 😊

    Reply
  18. Avatar

    Hello
    Simple and efficient
    thank you

    Reply
    • Avatar

      replay Cahors (France)

      Reply
  19. Avatar

    Would it be possible, to have an image as scrollbar?

    Reply
    • Avatar

      Yes, I believe it is possible. You’ll just need to define the image in the CSS. But it should work πŸ™‚

      Reply
  20. Avatar

    Hi Tim, thanks for the great tutorial. If I want to add different colour scrollbars to a group of pages – eg 10 pages with one colour combination, 10 pages with a different combination, and 10 more with another, is it possible to group the page ID’s or do I have to copy and paste the css 30 times each with the individual page ID?

    Reply
    • Avatar

      Hi Tara, You can group the page IDs by placing a comma in between.

      So you would write the CSS like this:
      .page-id-1::-webkit-scrollbar, .page-id-2::-webkit-scrollbar {
      width: 25px;
      }

      You would just need to do the same for each page ID, and each chunk of the CSS.

      Reply
  21. Avatar

    Replay from The Netherlands!

    Reply
  22. Avatar

    replay from Nashville TN

    Reply

Submit a Comment

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

Pin It on Pinterest

Share This