Single Div Mobile/Hamburger Menu

index.html

<header>
  <span>The Single Div Mobile/Hamburger Menu</span>
  <div id="mo-nav"></div>
</header>

Single-Div-Mobile-Hamburger-Menu.markdown

Single Div Mobile/Hamburger Menu

I think other people use 3 divs to make their mobile/hamburger menus. Not sure. I've always done it with one.

A Pen by Darryl Dixon - Piece Digital on CodePen.

License.

style.css

body{
  background: rgba(0,150,250,1);
  margin: 0;
}
header{
  position: relative;
  height: 5em;
  background:rgba(0,60,250,1);
}
span{
  position: absolute;
  vertical-align: middle;
  margin: auto;
  font-family: sans-serif;
  font-size: 2em;
}
#mo-nav{
  position: fixed;
  top: .5em;
  right: .5em;
  background: rgba(0,150,250,1);
  height: 2.5em;
  width: 2.5em;
  border-radius: 10px;
  border: .8em solid rgba(0,60,250,1);
  box-shadow: 0 0 0 .1em rgba(0,150,250,1),
    inset 0 .5em 0 0 rgba(0,150,250,1),
    inset 0 1em 0 0 rgba(0,60,250,1),
    inset 0 1.5em 0 0 rgba(0,150,250,1),
    inset 0 2em 0 0 rgba(0,60,250,1),
    inset 0 2.5em 0 0 rgba(0,150,250,1);
}