<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="dropdown"> <input type="checkbox" id="checkbox_toggle"> <label for="checkbox_toggle" class="hamburger"> <span class="left-align-tier line"></span> </label> <nav> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </nav> </div> <div class="page-content"> </div>

@import'https://fonts.googleapis.com/css?family=Oswald|Nunito'; * { margin: 0; padding: 0; box-sizing: border-box; font-family: Oswald; color: #2d2d2d; cursor: default; } body { background-color: #fcfafc; padding: .875rem; } p{ margin-top: .125rem; font-family: "Nunito"; } a{ cursor: pointer; } input[type=checkbox] { display: none; } nav ul { max-width: 0px; overflow: hidden; list-style: none; transition: all 1s cubic-bezier(.325, 1, .22, 1); } nav li { border-bottom: .18rem solid #fff; color: #fff; font-size: 16px; padding: 5px 0; display: flex; justify-content: center; width: 100px; } nav li:last-of-type { margin-bottom: .625rem; } nav li a { font-family: "Nunito"; text-decoration: none; } nav li a:hover{ text-decoration: underline; } input[type=checkbox]:checked ~ nav ul { width: auto; max-width: 100px; height: auto; margin-left: 1.5rem; transition: all 1s cubic-bezier(.5, 1, .22, 1); } .hamburger { display: block; position: absolute; top: 18px; left: 13px; height: 2rem; width: 2rem; cursor: pointer; transition: all 1s cubic-bezier(.19, 1, .22, 1); } .line, .line::before, .line::after { position: absolute; height: .28rem; border-radius: 4px; background-color: currentColor; content: ''; transition: all .6s cubic-bezier(.5, .1, 0, 1.2); } .left-align-tier { top: 10px; width: 1.1rem; } .left-align-tier::before { top: -10px; width: 1.5rem; } .left-align-tier::after { top: 10px; width: .8rem; } input[type=checkbox]:checked ~ label .line.left-align-tier:before { top: 0px; width: .8rem; transform: translateX(5px) rotate(45deg) translateY(7px); } input[type=checkbox]:checked ~ label .line.left-align-tier { width: 1.4rem; } input[type=checkbox]:checked ~ label .line.left-align-tier:after { top: 14px; width: .8rem; transform: translateX(18px) rotate(-45deg) translateY(-26px); }