"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/RRoberts/pen/YpeJbK?limit=all&page=9&q=mobile" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <script src="https://use.fontawesome.com/f56e4513c5.js"></script> <style class="cp-pen-styles">html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #446CB3; } a{ text-decoration: none; } p, li, a{ font-size: 14px; } /* GRID */ .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%; } .three { width: 23.8%; } .two { width: 15.33%; } .one { width: 6.866%; } /* COLUMNS */ .col { display: block; float:left; margin: 0 0 0 1.6%; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 940px; margin: 0 auto; position: relative; } .row{ margin: 30px 0; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /*============================= ==========ALL MOBILES========== ===============================*/ /* MOBILE */ .mobile-wrap{ width: 100%; height: 450px; background-color: #fff; overflow: hidden; position: relative; } /* ICON AT TOP */ .header-wrap{ background-color: #22313F; color: #fff; } /* CIRCLE ICON AT BOTTOM */ .nav-circle-bottom{ background-color: #22313F; width: 50px; height: 50px; text-align: center; border-radius: 100%; padding: 0; position: absolute; bottom: 10px; right: 10px; } .nav-circle-bottom .hamburger{ margin: 7px auto; display: inline-block; } /* NAV AT BOTTOM */ .nav-bottom{ background-color: #22313F; width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; } /* HAMBURGER */ .hamburger{ padding: 5px 0; } .hamburger .line{ width: 25px; height: 2px; background-color: #fff; display: block; margin: 5px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger:hover{ cursor: pointer; } #hamburger-1.is-active .line:nth-child(2){ opacity: 0; } #hamburger-1.is-active .line:nth-child(1){ -webkit-transform: translateY(7px) rotate(45deg); -ms-transform: translateY(7px) rotate(45deg); -o-transform: translateY(7px) rotate(45deg); transform: translateY(7px) rotate(45deg); } #hamburger-1.is-active .line:nth-child(3){ -webkit-transform: translateY(-7px) rotate(-45deg); -ms-transform: translateY(-7px) rotate(-45deg); -o-transform: translateY(-7px) rotate(-45deg); transform: translateY(-7px) rotate(-45deg); } /* NAVIGATION */ .navigation ul{ list-style-type: none; margin: 0; padding: 0; } /*========= MOBILE 1 =========*/ #mobile-1 .navigation li a{ display: block; text-align: center; padding: 30px 0; color: #fff; } #mobile-1 .navigation{ width: 100%; height: 100%; background-color: #22313F; opacity: 0; -webkit-transition: all 0.3s ease-in-out 0.1s; -o-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s; } #mobile-1 .navigation.nav-is-active{ opacity: 1; } /*========= MOBILE 2 =========*/ #mobile-2 .navigation li a{ display: block; text-align: center; padding: 30px 0; color: #fff; } #mobile-2 .navigation{ width: 100%; height: 100%; background-color: #22313F; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #mobile-2 .navigation.nav-is-active{ -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /*========= MOBILE 3 =========*/ #mobile-3 .navigation li{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100%; background-color: #22313F; margin: 0 10px; position: absolute; bottom: 10px; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #mobile-3 li:nth-child(1){ right: 60px; } #mobile-3 li:nth-child(2){ right: 110px; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } #mobile-3 li:nth-child(3){ right: 160px; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } #mobile-3 .icon{ color: #fff; } #mobile-3 .navigation.nav-is-active li{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*========= MOBILE 4 =========*/ #mobile-4 .navigation li{ display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100%; background-color: #22313F; margin: 0 10px; position: absolute; bottom: 10px; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #mobile-4 .icon{ color: #fff; } #mobile-4 li:nth-child(1){ right: 0px; bottom: 70px; } #mobile-4 li:nth-child(2){ right: 50px; bottom: 60px; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } #mobile-4 li:nth-child(3){ right: 60px; bottom: 10px; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } #mobile-4 .navigation.nav-is-active li{ opacity: 1; } /*========= MOBILE 5 =========*/ #mobile-5 .nav-bottom li{ display: inline-block; border-bottom: 2px solid transparent; } #mobile-5 .nav-bottom li:hover{ border-bottom: 2px solid #fff; } #mobile-5 .nav-bottom li a{ color: #fff; padding: 10px; box-sizing: border-box; display: block; } /*========= MOBILE 6 =========*/ #mobile-6 .navigation li{ display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: #22313F; margin: 8px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 0; } #mobile-6 .navigation li a{ color: #fff; font-size: 12px; } #mobile-6 .navigation.nav-is-active li{ opacity: 1; } </style></head><body> <div class="container"> <div class="row cf"> <div class="four col"> <div id="mobile-1" class="mobile-wrap"> <div class="header-wrap"> <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> <div class="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <div class="four col"> <div id="mobile-2" class="mobile-wrap"> <div class="header-wrap"> <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> <div class="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <div class="four col"> <div id="mobile-3" class="mobile-wrap"> <div class="nav-circle-bottom"> <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> <div class="navigation"> <ul> <li><a href="#"><span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span></a></li> </ul> </div> </div> </div> </div> <div class="row cf"> <div class="four col"> <div id="mobile-4" class="mobile-wrap"> <div class="nav-circle-bottom"> <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> <div class="navigation"> <ul> <li><a href="#"><span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span></a></li> <li><a href="#"><span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span></a></li> </ul> </div> </div> </div> <div class="four col"> <div id="mobile-5" class="mobile-wrap"> <div class="nav-bottom navigation"> <ul class="cf"> <div class="three col"> <li><a href="#"><span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span></a></li> </div> <div class="three col"> <li><a href="#"><span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span></a></li> </div> <div class="three col"> <li><a href="#"><span class="icon"><i class="fa fa-paint-brush" aria-hidden="true"></i></span></a></li> </div> <div class="three col"> <li><a href="#"><span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span></a></li> </div> </ul> </div> </div> </div> <div class="four col"> <div id="mobile-6" class="mobile-wrap"> <div class="header-wrap"> <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> <div class="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </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(){ //ALL NAVIGATION MENUS $(".hamburger").click(function(){ $(this).toggleClass("is-active"); $(this).parent().next().toggleClass("nav-is-active"); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Argon Design System
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: