• Scrollbar

WordPress/Elementor: Custom Scrollbar

DESCRIPTION

Use this CSS to have the same custom scrollbar like this site. Remember to strict the CSS on desktop (& tablet) only, because it takes much space on mobile, especially on popups. Limit the CSS usage by adding this CSS before the this one.

CODE
DARK MODE 
				
					@media only screen 
and (min-device-width: 767px)
{
/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #181818;
	
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
	border-radius: 9px;
box-shadow: inset 0 0 10px 10px #888;
    border: solid 4px #181818;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #A1A1A1;
	box-shadow: inset 0 0 10px 10px #A1A1A1;
    border: solid 4px #181818;
}
}
CODE
LIGHT MODE 
				
					@media only screen 
and (min-device-width: 767px)
{
/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #E1E1E1;
	
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff;
	border-radius: 9px;
box-shadow: inset 0 0 10px 10px #888;
    border: solid 4px #E1E1E1;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
	box-shadow: inset 0 0 10px 10px #A1A1A1;
    border: solid 4px ##C0C0C0;
}
}
DEMO
DARK MODE
DEMO
LIGHTMODE
MORE HOW-TO POSTS
  • Video ·

YotuWP: Custom CSS

DESCRIPTION Go to Dashboard > Appearance > Customize and add this custom CSS. CODE DARK…
MAIN MENU

Developer at Albali Studio