I've been using bootstrap3 and Jekyll to improve a website. I've made a header.html file for the _include folder that will be included in pages to provide a jumbotron and navbar beneath. This is a link to a copy of the entire folder in case I omit anything here and the index page should load in other people's browsers who may or may not experience my problem: https://www.dropbox.com/sh/bv59k92zjt142vp/F62a6bxeCJ
My problem is that if I load index.html in my browser at localhost 4000 (Jekyll server set to watch mode), everything in the header.html and my index.html content is displayed correctly, but as I scroll, sometimes when the navbar becomes fixed to the top the content of the page beneath it continues to scroll over it and overlap the bar, and sometimes it does not. In addition if I mouse over a button in the index page content when the content is not overlapping the navbar, upon mouse over it does overlap the navbar and stays there.
I'm having trouble understanding why this is so. I've provided my header.html code and css below in addition to the link to the folder.
The header as you can see has a navbar with affix behavior:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css" type="text/css"/>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\
ript>
<![endif]-->
</head>
<body>
<!-- First we begin the main container that contains all content, this is closed in the footer.html file right at the end -->
<div class="container-fluid main">
<!-- Start of JumboTron -->
<div class="jumbotron">
<div class="row">
<div class="col-lg-4">
<img src="{{ page.headimage }}" class="img-rounded">
</div>
<div class="col-lg-8">
<div class="page-header">
<h2> {{ page.title }} </h2>
<p> <h2> <small> {{ page.subtitle }} </small> </h2> </p>
</div>
</div>
</div>
</div>
<!-- End of JumboTron -->
<!-- Start of the Navigation Bar, this is supposed to have sticky behaviour -->
<div class="row-fluid">
<div id="menubar" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="280">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="https://github.com/Ward9250/HybRIDS">HybRIDS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About HybRIDS</a></li>
<li><a href="#">Getting Started</a></li>
<li><a href="#">Quick Start</a></li>
<li><a href="#">Full Documentation</a></li>
<li><a href="./contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Download<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/Ward9250/HybRIDS">GitHub Repository</a></li>
<li><a href="#">Download TAR</a></li>
<li><a href="https://github.com/Ward9250/HybRIDS/archive/master.zip">Download ZIP</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- End of the navbar, it stretches across the screen like the jumbotron does and lies immediately below it -->
<!-- Now we open up the container that holds all the other content in the webpage that lies underneath this standard header -->
<div class="container">
The navbar is supposed to be affixed to the top. The corresponding relevant CSS for the index page is defined in my custom.css file:
/* Set the page's background colour */
body {
background-color: #333333;
padding-bottom: 100px;
}
/* Alter class for navbar to give format and special behaviour */
.navbar {
position: sticky;
}
.container-fluid .main{
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
/* For making paragraphs white in font */
.whitep {
color: white;
}
.jumbotron {
margin-bottom: 0px;
background-image: url(../img/carouelbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
/* Styling for the side menubar and affixed navbar for the pages */
#menubar.affix {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
