I am using the sticky footer navbar template from Boostrap as a starting point and trying to have the gray div a fixed height of 120px, and the blue div taking up the remaining height.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../../../favicon.ico">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container-fluid">
<div class="row bg-primary d-flex flex-1 flex-column">
ermentum, tortor tellus ultricies erat, et ultricies magna nisi at
</div>
<div class="row bg-secondary flex-0" style="height:120px;">
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
and the css file
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 40px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 40px;
line-height: 40px; /* Vertically center the text there */
background-color: #f5f5f5;
}
body > .container-fluid {
padding: 50px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
I also tried taking the code form codepen I found and pasting it in the template and tweeking the CSS but I never got it to work.
[ is what the code posted above looks like in a browser
and I was looking to end up with something that looks like the image below when the height of the blue div is less then the height of the screen - the 40px sticky footer and the 120px grey div.
[
When the content of the blue screen is greater then the height of the screen, then show the scroll bars as necessary and have sticky footer act as a normal footer and shown below the 120px gray div.
Related
I'm trying to obtain a simple layout composed by a stack of header, main section, footer.
I'm using bootstrap 5.
The entire layout must cover all the available space in width and height, overflow (x and y) must be hidden.
Header and wrapper must take all the needed space.
Main section must be in between header and footer and must take all the available space.
Main section is composed by a sidebar and an area that will contain the main content.
Sidebar and main content are disposed side by side.
Sidebar must take 1/6 of the entire width available.
Main content must take the rest of available space in width.
Here is some code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content">
Main content
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
I would like to show overflow-y for sidebar/main content when it's needed. But I would also like to preserve the position of footer.
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
Set the .content container as relative, then put content in inner div of absolute inset-0.
Edit: this is just an example, I was using tailwind syntax on the class, bootstrap might be slightly different classNames
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title></title>
</head>
<body>
<div class="d-flex flex-column wrapper">
<div>
<nav class="navbar navbar-light header">
<div class="px-3">
<a class="navbar-brand" href="#">
Header
</a>
</div>
</nav>
</div>
<section class="flex-grow-1 d-flex section">
<div class="col-2 sidebar">
<ul class="nav flex-column menu-nav">
<li class="nav-item px-3 py-2">
Sidebar
</li>
</ul>
</div>
<div class="col p-2 px-3 content relative">
<div class="absolute inset-0 overflow-y-scroll">
Main content
</div>
</div>
</section>
<nav class="navbar navbar-light header">
<div class="px-3">
Footer
</div>
</nav>
</div>
</body>
<style>
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.header {
background-color: #1ea185;
}
.wrapper {
height: 100vh;
}
.section {
}
.sidebar {
height: 100%;
overflow-y: auto;
background-color: #fff;
}
.content {
height: 100%;
overflow-y: auto;
background-color: #eff6f6;
}
</style>
</html>
Using Bootstrap 4 beta.
My responsive navbar contains a logo in the navbar-brand on the left side and an inline menu of links on the right side. When the viewport changes, the navbar collapses correctly, but the logo does not shrink as it should. This forces the hamburger to wrap below the logo for the smallest viewports.
I would like the logo to shrink to the point where wrapping the toggler button is not necessary.
MIG Logo
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
#wrapper {
min-height:100%; /* For Sticky Footer */
position:relative;
}
.mig-header-menu-bar{
border-style: solid;
border-width: 3px;
border-color: #7C9D63;
}
.mig-header-menu-bar a:link, a:visited{
color: #00008B;
text-decoration: none;
}
.mig-header-menu-bar a:hover, a:active {
color: #7C9D63;
text-decoration: none;
}
.mig-header-menu-toggle-button{
color: white;
background-color: #7C9D63;
max-height: 50px;
z-index: 9900;
margin-top: 1.5rem;
}
.mig-header-menu-bar .nav-pills .nav-item.show .nav-link {
background-color: #7C9D63;
}
.mig-header-menu-bar .dropdown-menu {
border-bottom-width: 4px;
border-bottom-color: #7C9D63;
}
.more-rounded {
border-radius: .50rem;
}
</style>
</head>
<body>
<div id ="wrapper">
<nav class="navbar navbar-expand-md navbar-toggleable fixed-top pt-0" style="background-color: #515254;"> <!-- navbar-expand -->
<div class="nav w-100 justify-content-between align-middle">
<a class="navbar-brand mt-2" href="http://www.methodinvestmentgroup.com">
<img class="img-fluid" alt="Method Investment Group logo" src="https://i.stack.imgur.com/s3oSY.jpg">
</a>
<!-- </div> -->
<button class="navbar-toggler mig-header-menu-toggle-button" type="button" data-toggle="collapse" data-target="#MIGnavbarToggler" aria-controls="MIGnavbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon ">☰</span>
</button>
<div class="collapse navbar-collapse justify-content-end " id="MIGnavbarToggler">
<div class='mig-header-menu-bar more-rounded bg-faded'>
<ul class='nav nav-pills more-rounded bg-light' >
<li class='nav-item'>
<a class='nav-link' href="index.php">Login</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="About.php">About Us</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="ShowFAQ.php">Frequently Asked Questions</a>
</li>
</ul>
</div>
</div> <!-- End of collapse div -->
</div>
</nav>
<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I added an id to the parent div and the following media query:
#media screen and (max-width: 340px){
#mig-header > a {
max-width: 200px;
}
#mig-header > button {
padding: 0.25rem;
}
}
It works perfectly.
This works for me to shrink the logo on mobile:
.navbar-brand img {
max-width: 100%;
}
You should set fixed dimensions for your logo like so:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/60" width="30" height="30" alt="">
</a>
</nav>
That's because the height of the navbar does NOT change and that's the officially recommended way of doing it:
https://getbootstrap.com/docs/4.0/components/navbar/#brand
In my code when size of screen changes, the collapse icon appears but when i click that icon none of contents are visible.
and another problem is i want background of section element to be an image, so i added background-image in css but that's not working.
body {
padding-top: 70px;
}
.navbarhead{
background-color: #BDBDBD;
height: 100px;
border-style: solid;
border-right: none;
border-top: none;
border-left: none;
}
#navitem{
font-size: 20px;
color: black;
}
.btn-small{
padding:10px 25px;
}
#btnin, #btnin:hover,#btnin:focus {
color: #fff;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:black;
text-decoration:none;
}
#btnup, #btnup:hover,#btnup:focus {
color: black;
font-family: 'open_sanssemibold';
font-size:20px;
background-color:white;
text-decoration:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ShortFundly-LeaderBoard</title>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<!-- Style sheet -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/leaderboard-responsive.css" media="screen">
</head>
<body>
<!--navbar starts-->
<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top navbarhead">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse in navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="https://www.shortfundly.com">
<img src="https://www.shortfundly.com/tpl/main/v4/images/logo.svg" class="img-fluid" alt="Shortfundly Logo" />
</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Community</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link" href="#">Collaborate</a>
</li>
<li class="nav-item" id="navitem">
<a class="nav-link">LeaderBoard</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right my-lg-0 m-0">
<li>sign in</li>
<li>sign up</li>
</ul>
</div>
</nav>
<!--navbar ends-->
<!-- HEADING STARTS -->
<section style="background-image: url('banner.png');margin-top: 100px;">
<div class="container">
<div class="Jumbotron">
<h1>My Jumbotron</h1>
<p>Think BIG with a Bootstrap Jumbotron!</p>
</div>
</div>
</section>
<!--HEADING ENDS-->
</body>
</html>
mgur.com/CE0Fm.jpg
Add these two scripts in your section, bootstrap doesn't work if you haven't defined jquery and bootstrap.js scripts
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
Make sure you have added all the Bootstrap 4 cdns to your project. It looks like you're missing the necessary JavaScripts.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Also, I'd remove height: 100px; from your .navbarhead in your css to make sure the collapsed menu displays properly.
You should also add some styles to your .navbar-brand at the collapse breaking point for good measure. On very small screens, I would take the margin off of your login buttons. The use of !important here is bad practice, but sometimes it is useful when doing overrides for edge cases.
#media screen and (max-width: 992px) {
.navbar-brand {
align-self: flex-end;
margin-top: -2.5rem;
}
.m-4 {
margin: 0 !important;
}
}
See the: CodePen Demo
I've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen.
Codepen link
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
you can use flexbox; you need to set a height to your flexbox container to see the centered title
here an example : https://codepen.io/anon/pen/YQPPaM
$(document).foundation();
.hero-image {
background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 25%;
}
.container{
height : 100vh;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="vertical menu">
<li>Home</li>
<li>About</li>
<li>References</li>
<li>Contact</li>
</ul>
</div><!-- off-canvas menu -->
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<div class="hero-image">
<div class="expanded header-intro row">
<button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar show-for-small-only" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical menu" data-dropdown-menu>
<li class="menu-text">Foundation Framework</li>
<li>Home</li>
<li>About</li>
<li>Reference</li>
<li>About</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="small-12 text-center columns container">
<h1>Foundation</h1> <!-- like the h1 centered vertically -->
<h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
</div>
</div>
</div><!-- Eno of hero-image section -->
</div><!-- off-canvas-content-->
</div><!-- off-canvas wrapper-->
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
try this
h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h3 {
margin: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
Reference: w3schools
I suppose you're using flex-grid, so you can just add align-middle class to you row. This will add align-items: center; attribute, and align your columns' content vertically in the center.
.row {
max-width: 960px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-flow: row wrap;
height: 200px;
}
.align-middle {
align-items: center;
}
.column, .columns {
flex: 1 1 0px;
padding-left: 20px;
padding-right: 20px;
min-width: initial;
}
<div class="row align-middle">
<div class="small-12 text-center columns">
<h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
<h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
</div>
</div>
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>Home</li>
<li>About HybRIDS</li>
<li>Getting Started</li>
<li>Quick Start</li>
<li>Full Documentation</li>
<li>Contact</li>
<li class="dropdown">
Download<b class="caret"></b>
<ul class="dropdown-menu">
<li>GitHub Repository</li>
<li>Download TAR</li>
<li>Download ZIP</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;
}
Try to move <div class="container"> in the next _includes/ file instead of keeping it in the header.