Okay
  Print

Navigation same demo

1, Create a custom navigation: http://prntscr.com/8z68gm

2, Add element navigation: http://prntscr.com/8z69l0

Then paste this code into CSS : http://prntscr.com/8z6dv8

.robusta.tparrows {
background: transparent;
cursor:pointer;
width:30px;
height:30px;
position:absolute;
display:block;
z-index:100;
border: 1px solid #fff;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}



.robusta.tparrows:before {
font-family: "revicons";
font-size:11px;
font-weight: 700;
color:#fff;
display:block;
line-height: 30px;
text-align: center;
z-index:2;
position:relative;
}
.robusta.tparrows.tp-leftarrow:before {
content: "\e824";
}
.robusta.tparrows.tp-rightarrow:before {
content: "\e825";
}



.robusta .tp-title-wrap {
color: #fff;
text-transform: uppercase;
font-size: 11px;
line-height: 22px;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0 12px;
border-bottom: 1px dotted #fff;
}



.robusta.tparrows:hover .tp-title-wrap{
color: #ff2b42;
}

.robusta.tp-rightarrow .tp-title-wrap {
right: 29px;
position: absolute;
top: -7px;
white-space: nowrap;
}
.robusta.tp-rightarrow .tp-title-wrap:after {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: -3px;
content: "";
height: 5px;
position: absolute;
left: 0;
width: 5px;
}



.robusta.tp-leftarrow .tp-title-wrap {
left: 29px;
position: absolute;
top: -7px;
white-space: nowrap;
}



.robusta.tp-leftarrow .tp-title-wrap:after {
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: -3px;
content: "";
height: 5px;
position: absolute;
right: 0;
width: 5px;
}



.robusta.tparrows:hover .tp-arr-titleholder {
}


3, Add element navigation: http://prntscr.com/8z6a6a


4, Add element navigation: http://prntscr.com/8z6b4o http://prntscr.com/8z6azt



5, Add element navigation: http://prntscr.com/8z6gn0

http://prntscr.com/8z6g4b


6. Save all changes and http://prntscr.com/8z6e43

Result : http://prntscr.com/8z6ebw