I can't seem to create a fixed Navigation bar on scroll. I've looked at some of the answers posted on here however I can't get it to work for my solution. THe problem I'm facing is that the nav bar does not scroll after the header. It stays in a fixed position below the header and does not move despite scrolling down. Any ideas?
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar").addClass("top-nav-collapse");
} else {
$(".navbar").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
position: relative
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
background-color: azure
}
.top-nav-collapse {
padding: 0;
}
}
<body id="home" data-spy="scroll" data-target=".navbar-default">
<!-- Header -->
<header id="top" class="header-Home">
<div class="text-vertical-center">
<!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> -->
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<h4>About</h4>
<h4>Services</h4>
<h4>Contact</h4>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-brand page-scroll" href="#home">A&Co</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#home"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</body>
</html>
Screenshot 1
Screenshot 2
To keep the navigation bar in the same place as you scroll it's
position: fixed;
In the CSS for the nav that worked for me, but that not might be what you are after...
$(window).scroll(function(){
if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
$(".navbar").addClass(".stop");
} else {
$(".navbar").removeClass(".stop");
}
});
enter code here
// css
.stop{
top: 0;
left: 0;
width: 100%;
padding: 0;
}
// html markup
<!-- Begin Navbar -->
<div class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left ">
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li class="dropdown">
<button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
Reservation
</button>
<ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
<li>Reservation Table</li>
<li>Reservation Event</li>
</ul>
</li>
</ul>
<div class="logo">
<a href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li>Blog</li>
<li>Contact</li>
<li>Order No : (123) 234-8765</li>
</ul>
</div><!-- /collapse -->
</div><!-- /container -->
</div><!--/Navbar -->`enter code here`
Related
I would like to show a Leaflet web map in the container of the content in a full page Bootstrap template.
I have well set up all css and js files required to run Bootstrap and Leaflet.
The style looks like:
#col-sm-8 {
position: relative;
width: 100%;
height: 100%;
}
#travelContent {
position: relative;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
<div class="col-sm-8 text-left">
<h1>test</h1>
<div id="travelContent">
<div id="map"></div>
</div>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
There was no map displayed on the page when previewed. The Developer Tool on Firefox indicated the travelContent and the map divs were with 0 height. I want the map to fill up the space for the parent containers which would fill up the browser.
I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar. How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li><a href="#" >WHAT WE DO</a></li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.
Thanks. :)
without resizing it looks normal
look how it overflows on resize
I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.
navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.
.navbar-brand {
background: red;
float: right;
display: block;
}
.navbar-header {
background: yellow;
}
.navbar-collapse {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li>WHAT WE DO</li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>
Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.
I've searching stackoverflow for quite a while now but still can't find the answer.
Is there any way for a navigation bar to collapse to the side using bootstrap? What I mean is you normally have horizontal navigation bar then when shrunk, it comes out from the side instead of dropping from top to bottom when a button is clicked. Does that make sense? I'm sorry I'm butchering this but it's kind of hard to explain.
Thanks for your help.
This can probably give you a base to start with if nothing else.
This uses it's own data-attribute to replace the default data-toggle="collapse" and the rest is just converting the navigation into a sidebar when the viewport is under 768px. The nav links are wrapped in <div class="navbar-default side-collapse open"> which adds the needed CSS for the sidebar and replaces the elements that would normally appear with the default classes.
Compare this example to the default in the Docs to see the changes.
See working example Snippet
$(document).ready(function() {
$('[data-toggle=collapse-side]').click(function(e) {
$('.side-collapse').toggleClass('open');
});
});
#media screen and (max-width: 768px) {
.navbar-side .side-collapse {
top: 50px;
bottom: 0;
left: 0;
width: 256px;
position: fixed;
overflow: auto;
transition: all 0.3s cubic-bezier(.87, -.41, .19, 1.44);
}
.navbar-side .side-collapse.open {
width: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-side navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" type="button" class="navbar-toggle"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-default side-collapse open">
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button> <strong>YUP!</strong>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
I am using bootstrap for my responsive navbar on mobile view.
When I click the button and the navbar menu is display from top to down.
What should I do to can make it from left to right?(Remember to resize your windows to mobile size).
You can check out this popular Bootstrap fork available: Jasny Bootstrap
It has the same slide in from left effect.
<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
You need to override following two properties to archive this. Here you should also use pull-left bootstrap class, this class element move into left side only but doesn't set margin. I thought you should override base on the requirement.
.nav-left{
float: left !important;
margin: 8px 15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed nav-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li>MANUALS</li>
<li>NEWS</li>
<li>SPARE PART</li>
<li>WHERE TO BUY</li>
<li>SUPPORT</li>
<li>EDIT BOOK</li>
<li>ADMIN</li>
<!-- <li>LOG OUT</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>
With the Jasny Bootstrap slide-in plug-in, the default class is "navmenu-fixed-left". You can change the class to "navmenu-fixed-right" to make the menu slide in from the right side:
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li>About</li>
<li>Capabilities</li>
</ul>
</div>
If you also want the toggle button to appear on the right side, you need to adjust some CSS:
.navbar-default .navbar-toggle-box {
float: right;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
position: absolute;
right: 0;
}