How to Customize Your Divi Website Scrollbar
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:
- In the Custom CSS Box in Divi Theme Options
- 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!