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
Multiple Font-Weights, One @Font-Face Query
Difference Between Body and * in CSS
Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights
Word-Wrap:Break-Word Not Working in IE8
First Letter Capitalize and Other Letters in Lower Case in CSS
Inner Border Over Images with CSS
Up/Down Arrow Key Issue with Typeahead Control (Angular Bootstrap Ui)
Using Two CSS Classes on One Element
How to Compile or Convert SASS/Scss to CSS with Node-Sass (No Ruby)
Css-Only Sticky Table Headers in Chrome
Binding in Control with "Class" Attribute
Css: Background Image on Background Color
Angular Dynamic Background Images
Input Type="Image" Shows Unwanted Border in Chrome and Broken Link in IE7
Bootstrap Change Div Order with Pull-Right, Pull-Left on 3 Columns