Ryan McCord Ryan McCord -4 years ago 199
jQuery Question

Sticky Bootstrap Navbar not working

I have a navbar for a little test site I am working on and I need some help with it. I am using Bootstrap (as you can probably tell) but cannot figure out how to make my navbar stick to the top of the screen as you scroll down. I would like the navbar to stay beneath the jumbotron until you scroll to the point where it would normally go off the screen. When it starts to go off the screen I would like it to stay at the top of the screen but go back up when necessary. I have tried different code in JQuery files such as :

$('.navbar-default').affix({
offset: {
top: 50
}
});


If anybody is able to help, it would be much appreciated.

Below is my HTML Code

<!DOCTYPE html>
<html lang="en">
<head>

<title>Hope's Seed</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JS/style.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

</head>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>

<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
</nav>

<div class="bg">
<div class="container-fluid">
<div class="row">
<img class="img-responsive" src="Images/plantgrow.jpg">
<div>
</div>
</div>

</body>
</html>


My CSS Code (there are likely some redundancies, I haven't gone back and cleaned it up yet):

.header .jumbotron {
color:#fff;
background-color:#a1ff7c;
font-family:Roboto Condensed;
margin-bottom:0px;
}

.navbar-default {
background-color: #78c45a;
border: 0px;
font-family:Roboto Condensed;
margin-bottom:0px;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus {
color: white; /*BACKGROUND color for active*/
background-color: #78c45a;
}

.navbar-default .navbar-nav > .active > a:hover{
background-color: #5a9344;
color: #fff;
}

.navbar-default .navbar-nav > li > a {
color: #fff;
}

.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}

.navbar-default .navbar-brand {
color: #fff;
}

.navbar-default .navbar-brand:hover {
background-color:#5a9344;
color: #fff;
}

.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}

.navbar-default .navbar-toggle {
border: 0px;
}

.navbar-default .navbar-toggle:hover {
background-color:#5a9344;;
}

p {
font-family: Roboto Condensed;
}

.bg .img-responsive {
width:100%;
height:auto;
}

.jumbotron {
padding-top:1%;
padding-bottom:1%;
}

.jumbotron h1 {
margin-top:0px;
}

.jumbotron p {
margin-bottom:0px;
}

.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
float:none;
display:table-cell;
text-align:center;
}

.container-fluid{
padding-left:0px;
padding-right:0px;
}

#myNavbar{
padding-left:0px;
padding-right:0px;
}

Answer Source

To use a fixed Bootstrap navbar, all you need to do is give the navbar a class of navbar-fixed-top:

<nav class="navbar navbar-default navbar-fixed-top">

I'm assuming you also want your green custom header to stick to the top of the screen, above the navbar. You'll also need to give the same class to that, in conjunction with giving the navbar a top offset equal to the height of the custom header:

<div class="header navbar-fixed-top">

.navbar.navbar-default {
  top: 155px;
}

I've created a fiddle showcasing this here.

Hope this helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download