The Custom Scroll Bar module restyles the browser’s scroll bar to match your brand colors.
Switch it on: Essentials → Modules → Custom Scroll Bar.
Configure it: Essentials → Scroll Bar.
Settings
| Setting | What it does | Default |
|---|---|---|
| Track Color | The scroll bar’s background "rail". | #f1f1f1 |
| Thumb Color | The part visitors drag. | #0073aa |
| Thumb Hover Color | The thumb’s color on hover. | #00a0d2 |
| Width | Scroll bar width in pixels (1–100). | 60 |
| Thumb Radius | Rounds the thumb’s corners, in pixels (0–50). | 0 |
Tip: the default width of 60px is bold. Most sites look best between 8 and 14px, with a Thumb Radius of about half the width for a pill shape. Width and radius don’t apply in every browser. See Browser support.
Presets
Click a preset to fill in all three colors at once, then click Save Changes:
| Preset | Track | Thumb | Hover |
|---|---|---|---|
| Default | #f1f1f1 | #0073aa | #00a0d2 |
| Light | #ffffff | #c3c4c7 | #a7aaad |
| Dark | #1d2327 | #50575e | #8c8f94 |
| Sunset | #fff4e5 | #f56e28 | #d63638 |
Presets only fill in the fields. Nothing changes on your site until you save.
Live preview
The Preview box on the settings page has its own scroll bar that updates as you change colors, width and radius. Scroll it to see the result before you save.
Browser support
Browsers style scroll bars in two different ways, and the module outputs both:
- Track and thumb colors apply in every modern desktop browser: Chrome, Edge, Firefox, Safari and Opera.
- Exact width, thumb radius and hover color use the older WebKit scroll bar styling, so they apply in browsers that still use it, such as Safari. Browsers that use the standard CSS scroll bar properties (Firefox, and current versions of Chrome and Edge) show a thin scroll bar in your colors instead.
- Mobile browsers usually use overlay scroll bars that can’t be styled, so the module has little visible effect on phones.
The Preview box shows how your current browser renders the scroll bar.