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.
Related
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.
The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot
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 a bootstrap formatted page with a fixed top navbar.
What I want is to set a full width (fixed height) cover image just over the nav (responsive possibly...).
I've tried this, but the cover just not show.
UPDATE1:
the navbar is showed in bottom of the page (like a footer)... don't understand why...
Here is my HTML:
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
...
...
...
Navbar CSS customization and cover CSS:
body {
min-height: 2000px;
padding-top: 70px;
}
.navbar-brand,
.navbar-nav li a.main-bar{
line-height: 70px;
height: 70px;
padding-top: 0;
}
.FlexEmbed {
display: block;
overflow: hidden;
position: relative;
}
.FlexEmbed:before {
content: "";
display: block;
width: 100%;
}
.FlexEmbed--3by1:before {
padding-bottom: 33.33333%;
}
Thanks in advance stackoverflow community!
UPDATE 2:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>MySite</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/navbar-fixed-top.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="CoverImage FlexEmbed FlexEmbed--3by1" style="background-image:url(http://placeimg.com/1000/1000/nature)"></div>
<nav class="navbar navbar-default navbar-fixed-top">
<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 style="max-width:70px; margin-top: 9px;" alt="IBA" src="#">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Mydropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>element1</li>
<li class="divider"></li>
<li>element2</li>
<li>element3</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>element4</li>
<li>element5</li>
<li>element6</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="content"></div> // here I paste all the content via jQuery
</body>
</html>
Heres a fiddle to my problem.
I hope I understood your question correctly. One option is to position your background fixed as well. By adding width: 100%; and background-size: cover; you'll get it to cover completely.
Update:
To get it to be more like a "Facebook cover image" add a height to the image and remove the padding-top: 70px; on the body. Then you should be set.
.FlexEmbed {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 70px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
You could also add some margin to your .navbar-fixed-top to see that the background is displayed on top.
.navbar-fixed-top {
top: 70px;
}
Check out my updated demo here.
Use JsFiddle to create a live demo.
The navbar is at the bottom because you have the image display as block;
I'm not quite sure either about what you're trying to achieve but, have you tried with z-index?
I am using twitter bootstrap in Bonfire. I am trying to have a footer at the bottom page if there is less content, and if there is more content, the footer goes towards the end.
I have been trying for hours, and not able to find out what I am missing. I checked examples and codes available, but not able to find out what is different, or missing.
Would really appreciate if anyone could point out what is missed here.
<!doctype html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/bootstrap.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/assets/css/bootstrap-responsive.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/footer_style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/jumbotron/css/jumbotron.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost/bonfire/public/themes/default/screen.css" media="screen" />
<link rel="shortcut icon" href="http://localhost/bonfire/public/favicon.ico">
</head>
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Brokerage Free - PAN Services </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-left">
<li class="dropdown">
Apply for PAN <b class="caret"></b>
<ul class="dropdown-menu">
<li >New PAN Application</li>
<li class="divider"></li>
<li>Replacement PAN Application</li>
<li class="divider"></li>
<li>Correction PAN Application</li>
</ul>
</li>
<li >FAQ</li>
<li>Track Application Status</li>
<li>Contact Us</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class = "container">
<h1> Privacy Policy </h1>
We are a financial Services Company, offering a wide variety of Financial Services.
</div><div class="push"></div>
<footer>
<div class="container">
<div class="span12">
<div clas="row">
<div class="span2 offset1">About US</div>
<div class="span2 ">Privacy Policy</div>
<div class="span2 ">Terms of Use</div>
<div class="span2 ">Contact Us</div>
</div>
<div class="push"></div>
</div>
<div class="row">
<p align="center">© Brokerage Free 2014. - All rights reserved.
</div>
</div>
</footer>
</div>
The footer_style.css is given below:
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: 150px;
position: relative;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
text-decoration: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -250px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
padding-bottom: 60px;
}
#main {
overflow:auto;
padding-bottom:250px; /* this needs to be bigger than footer height*/
}
.container .credit {
margin: 20px 0;
}
</style>
This problem is a CSS problem and had nothing to do with Bonfire. I am posting this solution so if someone has a similar problem in the future, might benefit out of this.
The following link helped me with finding a solution:
http://css-tricks.com/snippets/css/sticky-footer/
The way to go about fixing this issue was to have a wrapper div, and a footer div that is outside of the wrapper div. The link has details.
Best.