Bootstrap 3 Slide in Menu/Navbar on Mobile

Bootstrap 3 Slide in Menu Animation Direction on Mobile

Here is the way to build that style

JS

jQuery(function($){
$('.navbar-toggle').click(function(){
$('.navbar-collapse').toggleClass('right');
$('.navbar-toggle').toggleClass('indexcity');
});
});

I already reupdated the demo, the effect that you wanted i already get the way u posted before.

DEMO

Bootstrap 3 not showing hamburger menu and logo on mobile

Try this one

.mob-Logo {  display: none;}
@media only screen and (max-width: 767px) { .desk-Logo { display: none; } .mob-Logo { display: block; }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header role="banner"> <nav id="navbar-primary" class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="mob-Logo"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a> </div> <div class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li><a href="/advertise">Advertise</a></li> <li><a href="/contact">Contact</a></li> <li class="desk-logo"> <a href="/"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a> </li> <li><a href="/register">Register</a></li> <li><a href="/login">Login</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav></header>

Bootstrap slide menu navbar-right

What you actually need to do is just replace every left with right in the CSS and jQuery.
Working example here.

How can I change the 3x icon-bar in Bootstrap collapsible Navbar to my own hamburger icon?

You can remove the spans:

    <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

and add your icon directly to the button class like so,

 <button type="button" class="navbar-toggle hamburger-menu" data-toggle="collapse" data-target="#myNavbar">
</button>


Related Topics



Leave a reply



Submit