To add a small bit of flair to a website you can create 3 lines that transform into an X when clicked, like for the hamburger menu icon with the collapsed menu.
How To
Styles - main-navigation.scss
This is the style setup for the navbar toggle–update as needed for color changes, width of the bars, speed of transition, etc.
.navbar-toggle {
width: 42px;
// ≥ 768px
@include media-breakpoint-up(md) {
display: none;
}
// ≤ 767px
@include media-breakpoint-down(sm) {
position: relative;
display: block;
float: right;
margin-right: 0;
padding: 0;
background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent;
border-radius: 0;
}
.icon-bar {
transition: all .2s ease-in-out;
// ≤ 767px
@include media-breakpoint-down(sm) {
display: block;
width: 40px;
height: 4px;
background-color: $blue-light;
}
+ .icon-bar {
transition: all .3s ease-in-out;
}
}
&[aria-expanded="true"] {
.icon-bar {
transform: rotate(45deg);
visibility: visible;
opacity: 1;
position: absolute;
top: 8px;
width: 30px;
+ .icon-bar {
visibility: hidden;
opacity: 0;
transform: rotate(0);
+ .icon-bar {
transform: rotate(-45deg);
visibility: visible;
opacity: 1;
top: 8px;
}
}
}
}
&[aria-expanded="false"] {
.icon-bar + .icon-bar {
// ≤ 767px
@include media-breakpoint-down(sm) {
margin-top: 4px;
}
}
}
}
HTML - nav.mustache
An example setup for the hamburger menu bars.
Make sure that your nav begins with: <div class="collapse navbar-collapse" id="navbar-collapse">. This is important because you want the ID of the navbar-collapse to match with the data-target attribute on the button.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" aria-hidden="true"></span>
<span class="icon-bar" aria-hidden="true"></span>
<span class="icon-bar" aria-hidden="true"></span>
</button>
Example Sites
Tags: bs2, bs3, bs4, styles, scss, sass, less, css, hamburger menu, menu, mustache, html