A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Add a Custom Scrollbar in WordPress

How to Add a Custom Scrollbar in WordPress

Scrollbar may be a tiny detail on your website, but just because it is small, it doesn’t mean you have to stick to its default look. If rocking a unique visual identity is one of your priorities, here’s the good news – on WordPress websites, there is always a possibility to change the scrollbar and adjust it to your theme, style, and color scheme.

Default Scroll Bar

There are two ways to customize the scrollbar. The easier one is installing the plugin, which doesn’t require any coding skills. The other way is to insert Additional CSS in WordPress settings.

Using the Advanced Scrollbar Plugin

The Advanced Scrollbar is a free plugin, so you can find it in the WordPress plugin library. Navigate to the admin panel and click on Plugins > Add New to open the library. In the search bar, type “Advanced Scrollbar” and click on the result.

Install the plugin and don’t forget to activate it using the activation link. The plugins don’t work if they are not activated.

Advanced Scrollbar Plugin

After you activate the plugin, you’ll be able to change its settings. Navigating to the Settings in the main menu on the dashboard. Click on Custom Color Scrollbar Settings.

Advanced Scrollbar Plugin Settings

These are default settings.

Advanced Scrollbar Plugin Default Settings

This is how the scrollbar looks like with the default settings.

Advanced Scrollbar Default

If you want to change the basic settings, you can tweak the scrollbar and rail background color.

Tweak the scrollbar and rail background color

Additionally, you can set the mouse scroll speed, scrollbar speed, and the option to hide the scrollbar automatically. You can also choose whether the scrollbar will have a left or right alignment. There is also an option to enable displaying the scrollbar on touch devices such as mobile phones and tablets.

Aditional Scrollbar Plugin Settings

The additional settings to change your scrollbar’s style are in the second tab, Scrollbar Custom Style Settings. Here you can change the scrollbar width, border CSS and border radius.

Scrollbar Custom Style Settings

This is the end result of our changes.

End result

Using the Additional CSS

The second solution for adding a custom scrollbar to your WordPress site requires a little bit of coding knowledge. If you have no experience with programming yet still want to add a custom scrollbar this way, follow the instructions carefully.

To add a custom CSS site-wide, navigate to the main menu in the dashboard and click on Appearance > Customize.

Appearance Customize

Click on the Additional CSS field.

Customize Additional CSS

Paste the following code to the Additional CSS box.

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: #f8c1c0; 
border:1px solid #fff;
} 
::-webkit-scrollbar-thumb {
background: #bededa; 
border:1px solid #fff;
height:300px;
border-radius:4px;
}
Customize Additional CSS Add

When you add CSS, click on the Publish button and check the result. Keep in mind that this code will work on all Internet browsers, except on Firefox and Edge.

Conclusion

These are two simple ways to add a custom scrollbar in WordPress. Both are a viable choice for users with little to no coding experience.

Want to learn more about quick and effortless ways to boost your website’s design and performance? Check out this list of must-have WordPress plugins for starting a new website!

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply