How to Add a Custom Scrollbar in WordPress

155

Have you ever come across a site that has custom scrollbars? Some websites and web apps add custom scrollbars to meet their site’s UI or brand colors. In this article, we will show you how to add a custom scrollbar in WordPress without writing any code.

A custom scrollbar in action

A Custom scrollbar can be added with CSS into any WordPress website, but due to browser compatibility issues this solution is not ideal for beginners. But as the saying goes, there’s a plugin for that.

First thing you need to do is install and activate the Dewdrop Custom Scrollbar Plugin. Upon installation, you need to go to Settings » Dewdrop Scrollbar Options to configure the settings.

Choosing colors and borders for custom scrollbar

On the plugin settings page, first thing you need to configure is the scrollbar color. Then select width for your scrollbar, the default width is 12px. You can also adjust the width and color of the scrollbar border. Lastly, you can set the border radius for the scrollbar. The default border radius for custom scrollbar is 3px. Once you are done, save your settings.

Now head over to your website, and you will see your custom scrollbar in action. Feel free to customize the look of your scrollbar until you get the desired result.

We hope this article helped you add a custom scrollbar in WordPress.

If you liked this article, then subscribe to our YouTube Channel for more WordPress video tutorials. You can also join us on Twitter and Google+.