"nav mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/travisterwilligar/pen/vyBoEZ?limit=all&page=36&q=mobile" /> <style class="cp-pen-styles">/***** demo styles *****/ body { background-color: #E9ECEF; margin: 0; padding: 0; } .demo-container { max-width: 450px; display: block; margin: 0 auto; position: relative; overflow: hidden; } /***** Base header & nav styles *****/ .header { position: relative; padding-bottom: 0; width: 100%; max-width: 1600px; background-color: #fff; z-index: 4; } .header__container { max-width: 1170px; margin: 0 auto; padding-left: 0.85em; padding-right: 0.85em; } .header ul { margin: 0; padding: 0; } .header ul li { list-style: none; margin-bottom: 0; } .header ul li a:hover { color: #1a82e2; } nav.secondary { height: 2rem; width: 100%; border-bottom: 1px solid #e9ecef; } nav.primary { background-color: #fff; box-shadow: 0px 1px 3px -1px rgba(41, 70, 97, 0.2); position: relative; border-bottom: 1px solid #e9ecef; } nav.primary ul { display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; } nav.primary ul li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } nav.primary ul li.logo { -webkit-box-flex: 3; -ms-flex: 3; flex: 3; text-align: left; } nav.primary ul li.logo a { height: 72px; min-width: 150px; background-image: url("//sendgrid.com/brand/sg-logo-300.png"); background-position: left 22px; background-repeat: no-repeat; background-size: 150px auto; display: block; margin-left: 0; } /***** Mobile nav toggle container *****/ li.mobile-nav { position: relative; text-align: right; display: block; height: 4.5rem; vertical-align: middle; } /***** hamburger menu *****/ #nav-toggle { font-size: 1.875rem; position: absolute; width: 32px; right: 0; height: 73px; background: transparent; border: none; display: block; z-index: 1000; line-height: 1; padding: 0; cursor: pointer; } #nav-toggle:hover, #nav-toggle:focus { color: #1a82e2; outline: none; } #nav-toggle .menu { position: absolute; display: block; width: 1.875rem; height: 2px; background: #1a82e2; overflow: visible; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } #nav-toggle .menu:before, #nav-toggle .menu:after { content: ""; position: absolute; left: 0; width: 1.875rem; height: 2px; background: #1a82e2; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } #nav-toggle .menu:before { top: -8px; } #nav-toggle .menu:after { top: 8px; } #nav-toggle.open .menu { background-color: transparent; -webkit-transition: background-color 0s; transition: background-color 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } #nav-toggle.open .menu:before, #nav-toggle.open .menu:after { -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } #nav-toggle.open .menu:before { top: 0; box-shadow: none; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #nav-toggle.open .menu:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 0; } /***** Mobile nav menu styles *****/ nav.mobile { display: block; position: fixed; top: 4.5rem; width: 100%; background-color: #fff; z-index: 3; box-shadow: 0px 1px 3px -1px rgba(41, 70, 97, 0.2); -webkit-transform: translate(0, -360px); transform: translate(0, -360px); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding-bottom: 1rem; opacity: 0; max-width: 450px; } nav.mobile--open { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } nav.mobile ul { list-style-type: none; padding: 0; margin: 0; } nav.mobile li.link { font-family: "Colfax-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 1rem; padding: 1.5rem 0 0.5rem 1.5rem; } nav.mobile li.link a { color: #294661; display: block; text-decoration: none; } </style></head><body> <div class="demo-container"> <!-- nav --> <header class="header"> <nav class="primary"> <div class="header__container"> <ul> <li class="logo"> <a href="https://sendgrid.com"></a> </li> <li class="mobile-nav"> <button id="nav-toggle"> <span class="menu"></span> </button> </li> </ul> </div> </nav> </header> <!-- /nav --> <!-- mobile nav menu --> <nav class="mobile"> <ul> <li class="link"> <a href="https://sendgrid.com/docs">Docs Home</a> </li> <li class="link"> <a href="https://sendgrid.com/docs/Glossary/index.html">Glossary</a> </li> <li class="link link--selected"> <a href="https://support.sendgrid.com">Support</a> </li> <li class="link"> <a href="http://status.sendgrid.com">Status</a> </li> <li class="link"> <a href="#">Log In</a> </li> <li class="link"> <a href="https://sendgrid.com/pricing/">Sign Up</a> </li> </ul> </nav> <!-- /mobile nav menu --> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >$(document).ready(function(){ $('#nav-toggle').click(function(){ if($(this).hasClass('open')){ $(this).removeClass('open'); $('nav.mobile').removeClass('mobile--open'); }else{ $(this).addClass('open'); $('nav.mobile').addClass('mobile--open'); } }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: