Make A Custom ScrollBar In WordPress

Make A Custom ScrollBar In WordPressPin

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”.

Make A Custom ScrollBar In WordPress CSS Step 1Pin

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

Make A Custom ScrollBar In WordPress CSS Step 2Pin

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.

Make A Custom ScrollBar In WordPress CSS Step 3Pin

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?

Make A Custom ScrollBar In WordPress CSS Step 4Pin

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

Advanced ScrollBar PluginPin

A very simple way to customize your ScrollBar is to use the Advanced ScrollBar plugin, if you don’t want to use CSS.

You have all the options to change the look of your ScrollBar.

Features:

  • You can change Scrollbar color.
  • You can change Scrollbar Rail Background Color.
  • You can change Scrollbar Mouse Scroll Step.
  • You can set how hide the scrollbar works.
  • You can Control Scroll Speed.
  • You can Align left or right the scrollbar.
  • You can enable or disable Touch Behavior.
  • You can Control Scrollbar Width.
  • You can style the scrollbar radius & border.
  • Powered by jquery.
  • Very lite weight.
  • Easy to use user Interface.
  • Compitible with all devices including Mobile phone, Tablet Pc, Desktop.

Custom ScrollBar

Custom ScrollBar PluginPin

Tired of your website being like the others? If you want to stand out, one of the easiest ways is to customize your ScrollBar, for that we have the help of the Custom ScrollBar plugin, you just have to install and go to Dashboard -> Appearance -> Scrollbars and start playing.

Features:

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

Leave a Reply

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

10