15 Dot Navigation Styles for Divi Single Page Sites

by | Aug 18, 2016 | 28 comments

In this post I am going to share some nice custom styles for the Divi Dot Navigation. That is because I have noticed that most people (99,99%) that use Divi theme never change the default style of Dot Navigation and use it as it is. Of course, this is not fatal, and the default style is nice but when everybody uses the same thing it becomes so boring. I like everything customizable and decided to prepare some custom styles for Dot Navigation and share them with people. Below you can find 15 different custom styles and CSS snippets for each of them. All you need to do is to grab the CSS code and paste it into Divi -> Theme Options -> General -> Custom CSS or into your child theme style.css file. Enjoy!

Floating Dot Navigation Custom Styles

Floating Dot Navigation Custom Styles CSS Snippets

Floating Dot Navigation #1

 


/******************** Floating Dot Navigation #1 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 5px;
 border: 2px solid #9b59b6;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(220,198,224,0.75);
 -webkit-box-shadow: 0 0 8px rgba(0,0,0,.4);
 -moz-box-shadow: 0 0 8px rgba(0,0,0,.4);
 box-shadow: 0 0 8px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 7px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 12px;
 height: 25px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(155,89,182,0.46);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #9b59b6 !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #2


/******************** Floating Dot Navigation #2 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 5px;
 -webkit-border-top-left-radius: 9px;
 -moz-border-radius-topleft: 9px;
 border-top-left-radius: 9px;
 -webkit-border-bottom-left-radius: 9px;
 -moz-border-radius-bottomleft: 9px;
 border-bottom-left-radius: 9px;
 -webkit-border-top-right-radius: 9px;
 -moz-border-radius-topright: 9px;
 border-top-right-radius: 9px;
 -webkit-border-bottom-right-radius: 9px;
 -moz-border-radius-bottomright: 9px;
 border-bottom-right-radius: 9px;
 opacity: 0;
 background: #4aa3df;
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 7px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 10px;
 height: 10px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #ffffff !important;
 transform: scale(1.4);
 transition: background-color 0.3s ease, transform 0.3s linear;
}

Floating Dot Navigation #3


/*********************** Floating Dot Navigation #3 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0%;
 width: auto;
 padding: 5px;
 -webkit-border-top-left-radius: 50px;
 -moz-border-radius-topleft: 50px;
 border-top-left-radius: 50px;
 -webkit-border-bottom-left-radius: 50px;
 -moz-border-radius-bottomleft: 50px;
 border-bottom-left-radius: 50px;
 -webkit-border-top-right-radius: 50px;
 -moz-border-radius-topright: 50px;
 border-top-right-radius: 50px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(74,163,223,0.56);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 15px;
 height: 15px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #ffffff !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #4


/******************** Floating Dot Navigation #4***********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 5px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: #40d47e;
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 15px;
 height: 15px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #ffffff !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #5


/******************** Floating Dot Navigation #5 **********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0%;
 width: auto;
 padding: 5px;
 border: 1px solid #ffffff;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: #354b60;
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 5px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 15px;
 height: 15px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0) !important;
 border: 1px solid #ffffff;
 transition: background-color 0.6s ease, border-color 0.6s linear;
}

Floating Dot Navigation #6


/******************** Floating Dot Navigation #6 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(29,210,175,0.88);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 11px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 10px;
 height: 10px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: #ea6153;
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #ffffff !important;
}

Floating Dot Navigation #7


/****************** Floating Dot Navigation #7 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 0px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 20px;
 height: 20px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(255,255,255,0.51);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.84) !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #8


/********************* Floating Dot Navigation #8 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 0px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 10px;
 height: 35px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(224,103,105,0.73);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.94) !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #9


/************************ Floating Dot Navigation #9 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 5px;
 -webkit-border-top-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-left-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-bottomleft: 10px;
 border-bottom-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-radius-topright: 10px;
 border-top-right-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -moz-border-radius-bottomright: 10px;
 border-bottom-right-radius: 10px;
 opacity: 0;
 background: rgba(0,0,0,0.2);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 8px;
 height: 8px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(255,255,255,0.29);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.94) !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #10


/************************ Floating Dot Navigation #10 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 5px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(241,169,160,0.7);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 15px;
 height: 15px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(255,255,255,0.29);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.29) !important;
 border: 2px solid #76f771;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #11


/**************************** Floating Dot Navigation #11 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 3px;
 border: 2px solid #f9690e;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(249,105,14,0.38);
 -webkit-box-shadow: 0 0 8px rgba(0,0,0,.4);
 -moz-box-shadow: 0 0 8px rgba(0,0,0,.4);
 box-shadow: 0 0 8px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 3px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 25px;
 height: 25px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(249,105,14,0.46);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #f9690e !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #12


/************************ Floating Dot Navigation #12 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.25%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(103,65,114,0.45);
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
 -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);
 box-shadow: 0 0 5px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 20px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 7px;
 height: 7px;
 margin-right: 0px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 background-color: rgba(103,65,114,0.83);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.71) !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #13


/*************************** Floating Dot Navigation #13 ********************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.5%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 4px;
 -moz-border-radius-topleft: 4px;
 border-top-left-radius: 4px;
 -webkit-border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 border-bottom-left-radius: 4px;
 -webkit-border-top-right-radius: 4px;
 -moz-border-radius-topright: 4px;
 border-top-right-radius: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 border-bottom-right-radius: 4px;
 opacity: 0;
 background: rgba(0,0,0,0);
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
 -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);
 box-shadow: 0 0 5px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 12px;
 height: 12px;
 margin-right: 0px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 background-color: rgba(255,255,255,0.4);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.9) !important;
 transition: background-color 0.6s ease;
}

Floating Dot Navigation #14


/************************** Floating Dot Navigation #14 *******************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.5%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(0,0,0,0);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 25px;
 height: 25px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: rgba(255,255,255,0.85) !important;
}

Floating Dot Navigation #15


/************************** Floating Dot Navigation #15 *******************/
ul.et_pb_side_nav {
 top: 50%;
 right: 0.5%;
 width: auto;
 padding: 0px;
 -webkit-border-top-left-radius: 0px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-bottomleft: 0px;
 border-bottom-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -moz-border-radius-topright: 0px;
 border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 0px;
 -moz-border-radius-bottomright: 0px;
 border-bottom-right-radius: 0px;
 opacity: 0;
 background: rgba(0,0,0,0);
}

ul.et_pb_side_nav li.side_nav_item {
 padding: 11px;
}

ul.et_pb_side_nav .side_nav_item a {
 width: 10px;
 height: 10px;
 margin-right: 0px;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
 opacity: 1;
 -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -moz-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 -o-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
 animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
 background-color: #f9831b !important;
 transform: scale(1.5);
 transition: transform 0.3s ease;
}

Hope these CSS snippets will come handy. Please feel free to share your thoughts and suggestions below and don’t forget to share this page with your friends ;).

Pin It on Pinterest

Shares