Skip to content

Instantly share code, notes, and snippets.

@bUxEE
Created February 28, 2017 09:16
Show Gist options
  • Save bUxEE/7aaece7434ddac3e007c008d696b08cb to your computer and use it in GitHub Desktop.
Save bUxEE/7aaece7434ddac3e007c008d696b08cb to your computer and use it in GitHub Desktop.
bootstrap animated hamburger
/* HAMBURGER */
.navbar-toggle .icon-bar {
-webkit-transition: opacity, -webkit-transform;
transition: opacity, -webkit-transform;
transition: opacity, transform;
transition: opacity, transform, -webkit-transform;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
-webkit-transform: translateY(9px) rotate(45deg);
transform: translateY(9px) rotate(45deg);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
opacity: 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(4) {
-webkit-transform: translateY(-10px) rotate(-45deg);
transform: translateY(-10px) rotate(-45deg);
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-toggle .icon-bar {
width: 30px;
height: 4px;
background-color: #1a95da;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment