I'm using the below function to make a fixed navbar. However, at a certain height (when almost the whole page is showing but it has scroll) it prevents the page from scrolling and the page resists to scroll. I want the navbar to be sticky but not stop the page from scrolling at a certain height. any help will be highly appreciated. Thanks
HTML:
<nav id="navbar_2" class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed">
MENU
</button>
<a class="navbar-brand" href="#"><img src="https://cdn2.vectorstock.com/i/1000x1000/19/11/wi-fi-hotspot-icon-flat-design-vector-14071911.jpg" class="img-responsive" alt="Logo" align="center" ><br><br></a>
<!--<span class="navbar-text"><img src="" width=20% height=20%></span>
--><!--<img src="https://cdn2.vectorstock.com/i/1000x1000/23/56/mobile-phone-icon-vector-2382356.jpg" width="40px" height="50px" id=mobile_info4 style="margin: 15px -330px;"/>
-->
<span class="navbar-text" id=mobile_info style="font-size: 12px;">
<%= address %><br>
<%= manufacturer %><br>
<%= model %><br>
</span>
<a class="navbar-brand" href="#" hidden>
Administrator
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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">
<form class="navbar-form navbar-left" method="GET" role="search" >
<div class="form-group">
<input type="text" name="q" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="/index/<%= role %>/<%= _id %>/<%= token %>" >Home</a></li>
<!--<li class="dropdown">-->
<li><a href="/logout" >Logout</a></li>
<!-- <li><a href="/test2" >Testing Page</a></li>
-->
<!--<a href="/logout" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">-->
</ul>
<!--<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">SETTINGS</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
$(document).ready(function() {
var $navbar = $("#navbar_2");
AdjustHeader(); // Incase the user loads the page from halfway down (or something);
$(window).scroll(function() {
AdjustHeader();
});
function AdjustHeader(){
if ($(window).scrollTop() > 60) {
if (!$("#navbar_2").hasClass("navbar-fixed-top")) {
$("#navbar_2").addClass("navbar-fixed-top");
$('body').css('padding-top', $('.navbar').outerHeight() + 'px');
}
} else {
$("#navbar_2").removeClass("navbar-fixed-top");
$('body').css('padding-top', '0');
}
}
});
CSS:
#navbar_2 a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Related
I want to make the dropdown items appear on hover of the parent link, and to be clickable to a another page, how can this be done?
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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>
<a class="navbar-brand navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
<span class="fa fa-medkit"></span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
put this css in your code
.dropdown:hover .dropdown-menu {
display: block !important;
}
check out this snippet with your code
.dropdown:hover .dropdown-menu {
display: block;
}
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#app-nav" 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>
<a class="navbar-brand navbar-link" href="#"> <img src="assets/img/Saydullogo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="app-nav">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="fa fa-home"></span> Home</li>
<li class="dropdown">
</span> Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Beauty</li>
<li>Cosmetics</li>
<li>Medicines</li>
</ul>
</li>
<li><span class="fa fa-edit"></span> Registeration</li>
<li><span class="fa fa-phone-square"></span> Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
this.girish - that code works perfectly.
How do I transfrom a normal menu in a dropdown menu when the page is accessed by a small device? My code it's like this, it's responsive but I don't know how to implement this kind of menu. I wanted to put that 'hamburger menu'.
Ps: I can't modify the html
HTML updated:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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 class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
Just did it.
:
<div id="pai" class="row">
<div class="col-xs-12 col-xs-10">
<div class="menu">
<nav>
<div class="navbar-default" style="background-color: rgba(249,211,0,1.00);">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" 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 class="collapse navbar-collapse" id="navbar-collapse">
<ul id="menu" class="nav navbar-nav">
<li class="LogoPosicao"> <img class="img-responsive" id="imagemBBlogo" src="BBomParaTodos.png" alt="Banco Do Brasil Logo"> </li>
<li><a class="Entenda" href="#" visibility="hidden">ENTENDA</a></li>
<li><a class="SemJuros" href="#" visibility="hidden">SEM JUROS</a></li>
<li><a class="Quebra">|</a></li>
<li id="telefoneC"><a class="tel" href="#"> <span class="glyphicon glyphicon-earphone"></span> (99) 9999-9999</a></li>
<li id="contatoLI"><a class="Contato" href="#Contato-Site" button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">CONTATO</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
I want to add a link to my navbar that would stay to the right - even after navbar collapses it should stay to right. I've got it working when navbar is not collapsed, but after it collapses it goes to the next line which I don't want.
So my question is how would it be possible to keep the link on the same row after navbar collapses.
Here is my code so far:
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">WebSiteName</a>
</div>
<a class="pull-right" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
And the code in action:
https://jsfiddle.net/av1p3x69/
You can keep copy of your link in header and then can use bootstrap's responsive utility classes like hidden-xs, hidden-md to toggle the visibility like below.
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-right hidden-md" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<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="#">WebSiteName</a>
</div>
<a class="pull-right hidden-xs" style="padding-top: 15px; padding-left: 10px;" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
Check updated fiddle here
Other approach is to use media queries but this one I feel more simple. Thanks. Hope this helps you.
The link is now pulled to the right by its class name. I think it is better to put it in the navbar-right section and just give it an extra class with a float element. I've updated your code.
.nav-link {
padding-top: 15px;
padding-left: 10px;
float: right;
}
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
<li><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
Hope this is what you're looking for!
You can try below code, I used media query to get desire result
.right-link{
float: right;
padding-top: 15px;
padding-left: 10px;
}
#media only screen and (max-width : 768px) {
.right-link{
position: absolute;
top: 0;
right: 90px;
}
}
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#">WebSiteName</a>
</div>
<a class="right-link" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<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="#">WebSiteName</a>
</div>
<a class="nav-link" href="#">Link</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Using media query for mobile screen :
#media screen and (max-width: 680px) {
.nav-link {
position: absolute;
right: 10px;
top:0;
}
.navbar-toggle {
margin-right: 60px;
}
}
I use Bootstrap V3 in Wordpress.
What I want to achieve is that when someone clicks the button in the collapsed navbar menu, the div with the class .slider gets a extra class.
This is the HTML from the navbar:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<?php
wp_nav_menu( array(
'theme_location' => 'navbar-right',
'depth' => 2,
'menu_class' => 'nav navbar-nav navbar-right',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
And this is the HTML from the div where I want to add a extra class:
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div> <!-- close slider -->
I've tried this with CSS:
.navbar-default .navbar-collapse .in ~ .slider{
margin-top: -246px;
padding-top: 176px;
}
And this with jQuery:
$(function() {
$("#navbar").click(function() {
$(".slider").addClass("sliderMove");
});
});
The extra class that should be added on slider is:
.sliderMove{
margin-top: -246px;
padding-top: 176px;
}
The purpose of this is that the slider that is after/under the navbar stay's under the navbar when it collapsed.
You just need to hook into the Bootstrap collapse event of your collapsible navbar. There is no need to assign an extra click handler to the collapse nav button.
Collapse Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
Here is an example.
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
$(".slider").addClass("your-class");
})
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
$(".slider").removeClass("your-class");
})
.slider {
width: 100%;
min-height: 100px;
background-color: tomato;
}
.your-class {
background-color: lawngreen;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link <span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
<div class="slider"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The button you are are willing to click is having a class navbar-toggle and the div having navbar has an id navbar . So to achieve the click event on button you have to use the button id not the div id. So your jQuery code will go like:
$('.navbar-toggle').click(function(){
if($('#navbar').hasClass('in')){
$(".slider").addClass("sliderMove");
}else{
$(".slider").removeClass("sliderMove");
}
});
As you would like to remove the class when you collapse the menu again using same button.
you were doing everything fine, but you need to use toggleClass() and select other CSS selector that is not #navbar
it also possible to add a delay? Because the class is already activated before the navbar is fully collapsed.
Yes it is possible, by adding setTimeout()
$(".collapsed").click(function() {
// toggle the class after half second
setTimeout(function() {
$(".slider").toggleClass("sliderMove");
}, 500);
});
/* just to show in small devices */
#media (max-width: 992px) {
.sliderMove {
background: red;
height: 100vh;
width: 100%
}
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<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>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="slider"></div>
Try something like this:
(as you required when the user clicks the navbar-toggle button, adds a certain class to a certain div with jQuery)
$('body').ready(function() {
$('.navbar-toggle').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
});
Try this
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<div class="slider">
<div class="container">
<div class="row">
other elements
</div> <!-- close row -->
</div> <!-- close container -->
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Javascript
$('.navbar-collapse').on('click', function() {
$(".slider").toggleClass("sliderMove");
});
CSS
.sliderMove{
height:100%;
width:100%
}
DEMO HERE
I have and issue with bootstrap3 navbar-menu on a smaller viewport. When I go to response mode in inspector and click on a hamburger icon I don't see any interaction, debug tool is not showing any error, and I have all standard bootstrap3 navbar collapse class code to support smaller viewport, I'm just overlooking something.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="{% url 'index' %}"><img src="static/img/SNYClogo.png" height=50 width=110></a>
</div>
<div class="navbar-collapse collapse">
<ul id="navbar" class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Can someone please check this JSFIDDLE, and inspect mine code.
Give .navbar id to parent div not ul.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"><img src="..." height=50 width=110></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Apartments</li>
<li>About</li>
{% if user.is_authenticated %}
<li><a id="logout" href="/accounts/logout">Logout</a></li>
{% else %}
<li class="pull-right" id="showlogin"><button type="button" class="btn btn-sm btn-info round">GET STARTED</button></li>
{% endif %}
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
Fiddle