// Animated hamburger icon
//
// Add an animation to Bootstrap's `.navbar-toggle` hamburger icon,
// courtesy of Julien Melissas.
//
// @see http://codepen.io/JulienMelissas/pen/LEBGLj
// @see http://julienmelissas.com/animated-x-icon-for-the-bootstrap-navbar-toggle/
.navbar-toggle {
border: none;
background: transparent !important;
&:hover {
background: transparent !important;
}
.icon-bar {
width: 22px;
transition: all 0.2s;
}
.top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.middle-bar {
opacity: 0;
}
.bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
&.collapsed {
.top-bar {
transform: rotate(0);
}
.middle-bar {
opacity: 1;
}
.bottom-bar {
transform: rotate(0);
}
}
}
|