<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 ----------> <header class="header"> <a href="#" class="logo"> <h1>Logo</h1> </a> <input type="checkbox" class="mobile-menu fa fa-bars" /> <nav id="nav" class="nav"> <ul class="nav__list"> <li class="nav__item"><a href="#" class="nav__link">Link</a></li> <li class="nav__item"><a href="#" class="nav__link">Link</a></li> <li class="nav__item"><a href="#" class="nav__link">Link</a></li> <li class="nav__item"><a href="#" class="nav__link">Link</a></li> </ul> </nav> </header>

.header { align-items: center; background: #CCC; display: flex; font-family: sans-serif; height: 60px; justify-content: space-between; padding: 0 15px; } .logo { color: #333; font-size: 24px; text-decoration: none; } .mobile-menu { align-items: center; display: flex; justify-content: flex-end; visibility: hidden; &:before { color: #333; display: block; font-size: 27px; visibility: visible; } // For this, what you target is up to you, but I went with an ID in case you have multiple nav classes. &:checked ~ #nav { right: 0; } @media(min-width: 768px) { display: none; } } .nav { @media(max-width: 767px) { background: #EEE; height: 100vh; position: fixed; right: -250px; top: 60px; transition: right 0.25s; width: 250px; } &__list { @media(min-width: 768px) { display: flex; } } &__item { @media(max-width: 767px) { border-bottom: 1px solid #333; } @media(min-width: 768px) { margin-left: 30px; &:first-child { margin-left: 0; } } } &__link { color: #333; text-decoration: none; @media(max-width: 767px) { display: block; padding: 15px 10px; } } }