I am in need of assistance with my navbar for a small test site project I am currently working on. The site is utilizing Bootstrap, and I am struggling to get the navbar to stick to the top of the screen as users scroll down. My goal is to have the navbar positioned beneath the jumbotron until it reaches the point where it would typically disappear off-screen. Once it starts moving off-screen, I want it to remain at the top of the page but return to its original position when necessary. I've attempted various JQuery code snippets like:
$('.navbar-default').affix({
offset: {
top: 50
}
});
Any help with this issue would be greatly appreciated.
Below you can find the 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>
This is my CSS Code (note that there may be some redundancies which haven't been cleaned 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;
}