"responsive navbar with right slide"
Bootstrap 3.0.0 Snippet by sumitkumar

<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 ----------> <saction id="wit-logo-panel"> <div class="container relative"> <div class="col-xs-3"> <div class="wit-main-logo"> <a href="#"><img class="" src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png" alt="sumi9xm@gmail.com" title="sumi9xm@gmail.com"></a> </div> </div> <div class="col-xs-9 relative"> <div class="wit-navbar unset right-slid" id="qnimate"> <ul class="wit-nav"> <li><a href="#"><span class="menu_icon"><i class="fa fa-home" aria-hidden="true"></i></span>HOME</a></li> <li ><a href="#" class="" data-toggle="dropdown" data-hover="dropdown" data-delay="500"><span class="menu_icon"><i class="fa fa-user-o" aria-hidden="true"></i></span>About</a> <ul class="dropdown-menu"> <li><a href="#">Leadership</a> </li> <li><a href="#">Core values</a> </li> <li><a href="#">Careers</a> </li> <li><a href="#">Contact</a> </li> </ul> </li> <li ><a href="#"><span class="menu_icon"><i class="fa fa-cogs" aria-hidden="true"></i></span>SOLUTIONS</a> </li> <li ><a href="#"><span class="menu_icon"><i class="fa fa-flask" aria-hidden="true"></i></span>LABS</a> </li> <li ><a href="#"><span class="menu_icon"><i class="fa fa-address-book-o" aria-hidden="true"></i></span>PLAYBOOKS</a> </li> <li><a href="#"> <span class="menu_icon"><i class="fa fa-wpexplorer" aria-hidden="true"></i></span>Insights</a> </li> <li><a href="#"><span class="menu_icon"><i class="fa fa-question-circle" aria-hidden="true"></i></span>WHY WIT </a> </li> </ul> </div> <div class="dq-col"> <a href="#" class="dq-link">Know your DQ <br><span>Digital Quotient</span></a> <a id="toggle-plus" href="javascript:;"><i id="plus-btn" class="fa fa-plus"></i></a> </div> </div> </div> </saction>
#wit-logo-panel{ width:100%; height:85px; display: block; position: fixed; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1); background-color:#fff; } .relative{ position: relative; } .unset{ position: unset; } .wit-main-logo { margin-top: 12px; } .dq-col{ width:185px; height: auto; display: inline-block; float:right; position:relative; text-decoration:none; } .dq-col a{ display: inline-block; text-decoration:none; } .dq-col a:hover{ text-decoration:none!important; color:#fff; } .dq-link { padding: 6px 6px 7px 12px; color: #fff; text-transform: uppercase; font-family: 'Junicode'; background-color: #000; font-size: 15px; font-weight: 400; text-decoration: none; float: right; margin-top: 21px; position: absolute; right: 45px; } .dq-link span { font-size: 9px; display: block; top: 29px; word-spacing: 1px; letter-spacing: 1px; } #toggle-plus { width: 45px; height: 48px; text-align: center; line-height: 44px; float: right; position: absolute; top: 20px; z-index: 9999; background: #000; color: #fff; border: 1px solid #fff; padding: 15px; right: 0px; } .rotet-plus{ transform:rotate(47deg); transition: 0.5s; } #toggle-plus .fa{ transition: 0.5s; } /*//////////////////////wit-logo-menu//////////////////////*/ #wit-logo-menu{ width:100%; height:85px; display: block; position: fixed; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; background-color: #fff; } .wit-navbar { position: absolute; background-color: #fff; top: 2px; right: 60px; z-index: 99; } .wit-navbar .wit-nav { padding: 0px; margin: 0px; margin-top: 30px; float: right; margin-right: 15px; } .wit-navbar .wit-nav li{ list-style-type:none; position: relative; display: block; float: left; } .wit-navbar > .wit-nav > li > a { display: block; padding: 8px 10px; color: #000; font-size: 16px; line-height: 20px; text-transform: uppercase; color: #000; font-family: 'Junicode'; font-weight: 400; text-decoration:none; } .wit-navbar > .wit-nav > li > a:hover{ color:#2196F3; } .dropdown-menu > li > a:hover{ color:#2196F3; background-color: transparent; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 130px; padding: 5px 0; top: 45px; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 0px solid #ccc; border: 0px solid rgba(0, 0, 0, .15); border-radius: 0px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .dropdown-menu > li > a { display: block; padding: 5px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #000; font-size: 14px; text-transform: uppercase; white-space: nowrap; font-family: 'Junicode'; } .menu_icon{ display: none; } .wit-navbar li a:hover:before { width: 100%; background: #2196F3; } .wit-navbar li a:before { content: ""; height: 2px; left: 0; right:0; top: -2px; width: 0px; position: absolute; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; z-index: 1; } @media (max-width: 922px){ .dropdown-menu { position: static; float: none; min-width: 130px; padding: 5px 0; transition:0.5s; } .wit-navbar .wit-nav { padding: 0px; margin: 0px; float: right; top: 85; margin-right: 15px; background: #f4f4f4; right: -173px; width: 300px; position: absolute; height: 100vh; box-shadow: -4px 2px 15px 0px rgba(0,0,0,0.16)!important; overflow: scroll; } .wit-navbar .wit-nav li { float: none; } .wit-navbar > .wit-nav > li > a { display: block; padding: 14px 20px; color: #ADABAB; width: 100%; font-size: 15px; line-height: 20px; text-transform: uppercase; border-top: 1px solid #E5E5E5; background: #F4F4F4; font-family: 'Junicode'; font-weight: 400; text-decoration: none; } .menu_icon{ margin-left: 20px; margin-right: 15px; font-weight: bolder; font-size: 20px; display: unset; } .open>.dropdown-menu{ display: block; width: 100%; background-color: #f4f4f4; transition:0.5s; } .dropdown-menu > li > a{ padding: 14px 20px; color: #ADABAB; font-size: 14px; line-height: 20px; text-transform: uppercase; border-top: 1px solid #E5E5E5; background: #F4F4F4; font-family: 'Junicode'; font-weight: 400; text-decoration: none; } .right-slid{ margin-right:-270px;transition: 0.5s; } .left-slid{ margin-right:0px;transition: 0.5s; } .wit-navbar { position: absolute; background-color: #fff; top: 2px; right: 60px; z-index: -1; } } /*****************for iphone*****************/ @media (max-width: 580px){ .dq-link { font-size: 10px; padding: 4px 4px 4px 8px; right: 31px; } .dq-link span{ font-size: 6px; } #toggle-plus { font-size: 12px; width: 32px; height: 32px; padding: 10px; } .dq-col{ width: 150px; } .wit-main-logo img { width: 154px; } #wit-logo-panel{ height:70px; } .wit-navbar .wit-nav { top: 69px; } .menu_icon { font-size: 16px; } .wit-navbar > .wit-nav > li > a { padding: 8px 8px; font-size: 12px; } .wit-navbar .wit-nav { width: 238px; } .menu_icon { margin-left: 10px;} .dropdown-menu > li > a { padding: 8px 20px; font-size: 12px; } }
$(document).ready(function(){ if ($(window).width() > 992) { $("#toggle-plus").click(function(){ $("#qnimate").slideToggle(); }); } }) $(document).ready(function(){ if ($(window).width() < 992) { $("#toggle-plus").click(function(){ $("#qnimate").toggleClass("left-slid").fadeIn(700); }); } }) $(document).ready(function(){ $('#toggle-plus').click(function(){ $("#plus-btn").toggleClass('rotet-plus') }) });

Related: See More


Questions / Comments: