Toggler 2
Toggler 2
/* ===== Toggler 2 ===== */
#toggler-2,
#toggler-2 span:focus {
outline: none;
}
#toggler-2 span {
width: 30px;
height: 3px;
display: block;
background-color: #333;
margin: 7px 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#toggler-2 span:nth-child(1) {
width: 15px;
}
#toggler-2 span:nth-child(2) {
width: 15px;
-webkit-transform: translatex(15px);
-ms-transform: translatex(15px);
transform: translatex(15px)
}
#toggler-2 span:nth-child(3) {
width: 15px;
}
#toggler-2.collapsed span {
-webkit-transform: translatey(0);
-ms-transform: translatey(0);
transform: translatey(0);
opacity: 1;
width: 30px;
}
/* ===== Toggler ===== */
#toggler,
#toggler span:focus {
outline: none;
}
#toggler span {
width: 30px;
height: 3px;
display: block;
background-color: #333;
margin: 7px 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#toggler span:nth-child(1) {
width: 15px;
}
#toggler span:nth-child(2) {
width: 15px;
-webkit-transform: translatex(15px);
-ms-transform: translatex(15px);
transform: translatex(15px)
}
#toggler span:nth-child(3) {
width: 15px;
}
#toggler.collapsed span {
-webkit-transform: translatey(0);
-ms-transform: translatey(0);
transform: translatey(0);
opacity: 1;
width: 30px;
}