Customize Navigation Scroll-Bar With CSS3

Have you been searching for any thing which can change the design of navigation scroll-bar of your site. You might be wondering that how is it done? You should smile then, because finally you've arrived at the right place.

Changing the look and design of navigation scroll bar is not a hard task now. It's not hard because it can be customized very easily using CSS3 codes and another reason is I've already prepared a small stylesheet that will customize the look of navigation scroll bar whenever you site is opened.

So Here's the code

CSS

::-webkit-scrollbar-thumb:horizontal{height:10px;background-color:#eab92e;}

::-webkit-scrollbar-thumb:vertical{
width:10px;
background-color:#eab92e;/*box-shadow*/
-webkit-box-shadow:1px 1px 4px rgba(0,0,0,0.16);  
-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.16);       
box-shadow:1px 1px 4px rgba(0,0,0,0.16);
}
::-webkit-scrollbar{
width:15px;
height:15px;
background:#EBEBEB;/*box-shadow*/
-webkit-box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);  
-moz-box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);       
box-shadow:inset 1px 1px 4px rgba(0,0,0,0.13);
}

Customize the Color

Replace the codes in yellow color with the any other color codes you want to be displayed in scroll-bar.

Playground For Advanced Learners

Yeah! got it right this is the playground for you by, where you can learn some more advanced things. So what are you waiting for start playing and start learning.

Final Words

Do not forget to show your gratitude by leaving your comments below. And yep this is very small post but I am confident that it has very great content including a mini-playground also for our beginner developers. So play with the codes and start learning the Css thing with me :-)