Make A Custom ScrollBar In WordPress

With WordPress you can change many appearance of our website, we can even modify the ScrollBar, its colors, its size. A small detail like this can draw a lot of attention to the visitor of your website. We can do it using CSS or some plugin, let’s see both ways.

If you do not want to install more plugins, because you have too many, and an excess can be harmful and slow down your website, you can use a simple CSS. With CSS you can beautify your entire site.

Using CSS

The first thing we are going to do, within your WordPress, is to go to “Appearance -> Customize”.

Then, in the Customize menu, we will click on Additional CSS.

Now a small box will appear where we will add the CSS code to change the appearance of our SrollBar, in this case we will add the following, then we will explain what exactly our new code does.

Copy This Code

::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background-color: #1f2532;
border-radius: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #55bace;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #559cce;
border-radius: 1px;
}


How Does This Code Work?

One important thing is that you might not want your ScrollBar customization to be seen on tablets, or smartphones, only on PC. What you have to do is put the code inside:

@media only screen and (min-width : 981px) {

PASTE HERE YOUR CODE

}

NOTE: Do not forget that, if you are using a child theme of your proncipar theme, you can add your CSS code in the style.css file

Plugins To Customize Your Scrollbar

Advanced ScrollBar

Custom ScrollBar

Features:

• Multiple Selectors.
• Responsive.
• Custom Colors.
• Custom Css.
• Predefined Styles.
• Ajax Page Load Handling.
• Supports Responsive Design.
• Supported Language (English, Japanese).