15 Dot Navigation Styles for Divi Single Page Sites

by | Aug 18, 2016 | 34 comments

Update(27.06.2017): I have released the DotNav plugin which lets you do all the custom stylings suggested in this post and much more quickly and easely without having to deal with code. The DotNav plugin for Divi enhances the Dot Navigation by adding lots of new features to it, with this plugin you can do all customizations with live preview in Theme Customizer interface. Learn more here.

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
Share This