<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <label class="hamburger" for="nav-toggle"></label> <input id="nav-toggle" type="checkbox" class="hidden" /> <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> <li><a href="#">Link five</a></li> <li><a href="#">Link six</a></li> <li><a href="#">Link seven</a></li> </ul> </nav> </header>

header { width: 100%; display: inline-block; background-color: #404040; } .hamburger { height: 20px; width: 20px; padding: 20px; float: right; cursor: pointer; } .hamburger:before { content: ""; display: block; background-color: #f3f3f3; width: 100%; height: 4px; } .hamburger:after { content: ""; display: block; background-color: #f3f3f3; width: 100%; height: 4px; margin-top: 4px; box-shadow: 0px 8px 0 #f3f3f3; } nav { background-color: #2b2b2b; margin: 0; max-height: 0; overflow: hidden; clear:both; transition: max-height .3s cubic-bezier(0.63, 0, 0.25, 1);; } nav ul { margin: 0; padding: 0; list-style: none; display: block; } nav li { display: block; margin: 0; text-align: center; } nav a { color: white; display: block; padding: .4em; } header input[type="checkbox"]:checked ~ nav { max-height: 150px; border-bottom: #404040 5px solid; } header a:hover, header a:focus, header label:hover, header label:focus { background-color: #191919; } @media (min-width: 700px) { .hamburger { display: none; } nav { background: transparent; float: right; border: 0 !important; max-height: none; } nav ul, nav li, nav li a { display: inline-block; } nav a { display: inline-block; padding: 15px 1em; } } .hidden { position: fixed; top: -100%; left: -100%; }