I've built an off-canvas navigation menu on the right-hand side of the screen. Clicking the hamburger icon slides the menu in from right-to-left. I am using overflow:hidden on the wrapping div, so no scroll bars are present. However, when click-dragging the main body from right-to-left, it pulls the overflowing content into view. When switching the navigation to use a left positioning, this behavior does not occur... strange... Any ideas?
codepen: http://codepen.io/seejaeger/pen/eNJOeb
HTML
<div class="container">
<div class="translate">
<div class="main">
<div class="nav-wrap_small">
<img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/menu.png" class="offcanvas-toggle">
</div><!-- nav-wrap_small -->
<div class="nav-wrap">
<nav class="nav-left">
<img src="" alt="" width="80%">
</nav><!-- nav-left -->
<nav class="nav-center">
products
investment funds
commentary
literature
resources
about
</nav><!-- nav-center -->
<nav class="nav-right">
contact
accounts
<br>
<input type="text" class="nav-right-searchInput">
</nav><!-- nav-right -->
</div><!-- nav-wrap -->
<!-- main content goes here -->
</div><!-- main -->
<div class="offcanvas">
<nav>
<ul>
<li>products</li>
<li>investment funds</li>
<li>commentary</li>
<li>literature</li>
<li>resources</li>
<li>about</li>
</ul>
</nav>
</div>
</div><!-- translate -->
</div><!-- container -->
CSS
.container {
overflow: hidden;
}
.translate {
transition: transform 0.3s ease;
}
.translate.is-open {
transform: translate3d(-300px, 0, 0);
}
.offcanvas {
position: absolute;
width: 300px;
right: -300px;
top: 0;
bottom: 0;
background-color: #006993;
}
.offcanvas-toggle {
width: 33px;
height: 33px;
float: right;
}
.main {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.main:after {
content: " ";
display: block;
clear: both;
}
Hey guys i am working on this gallery.
Now I've thumbnails set on block grid and ive added an overlay div on first list item and the problem is that i am not able to set it dynamically i mean 100 percent width and height because the gallery is responsive so what i wanted is that overlay should fix on thumbbs.
i am unable to set the fiddle so i am uploading a live example.
you can see overlay extending thumbs.
please suggest a solution
Link
Thanks.
I need overlay on every thumb.
Here is my Code new one
<style>
.thumbsList li {
position: relative;
}
.overlay
{
position: absolute;
z-index: 22;
background-color: black;
opacity: 0.6;
height:100%;
with:100%;
z-index: 22;
}
</style>
</head>
<body>
<div class="row projectsRow">
<ul class="large-block-grid-3 medium-block-grid-3 small-block-grid-2 thumbsList">
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\1.jpg" alt="">
</li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\2.jpg" alt=""></li>
<li >
<div class="overlay"></div>
<img class="projectsThumbs" src="img\projects\3.jpg" alt=""></li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Give a position: relative; to the your <li> elements. Also put the <div class="overlay"></div> tag inside each <li> tags.
.thumbsList li {
position: relative;
}
And put the following code inside all <li> instead of just the first one.
<div class="overlay"></div>
With or without a top nav, it is very common for sites to have a sticky footer. Bootstrap has a facility to easily create fixed footers, but no such facility for creating sticky footers - there is a big difference.
Googling this question will reveal that hundreds if not thousands of developers have the same question but with no good answer.
Ironically, the Bootstrap documentation page itself has a sticky footer alongside bootstrap styling and a fixed top navbar. It's all custom css though, and not part of the framework. So an obvious route is to take and refactor their custom styling, since it obviously plays well within the Bootstrap framework, but that seems more painful than it ought to be.
See this plunkr for an example page with a Bootstrap top navbar, and an undesirable, non-sticky footer.
Problem:
(Thanks Softlayer - for the graphics)
Desired Solution:
Of course the footer should be responsive and cross-browser friendly as well...
The answer, as Schmalzy points out, can be found here in the examples section of the getbootstrap site.
But that example does not include a top nav. For fixed top nav with sticky footer, see this plnkr, or code below.
Style CSS:
/* Styles go here */
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .credit {
margin: 20px 0;
}
Index.html:
<!DOCTYPE html>
<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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
</div><!-- Wrap Div end -->
<div id="footer">
<div class="container">
<p class="text-muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Sticky footer solutions that rely upon fixed-height footers are falling out of favour in with responsive approaches (where the height of the footer often changes at different break points). The simplest responsive sticky footer solution I've seen involves using display: table on a top-level container, e.g.:
http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/
http://timothy-long.com/responsive-sticky-footer/
http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/
The best way is to do the following:
HTML:Sticky Footer
CSS: CSS for Sticky Footer
HTML Code Sample:
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS Code Sample:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Another little tweak might make it more perfect (depends on your project), so it will not affect footer on mobile views.
#media (max-width:768px){ .footer{position:absolute;width:100%;} }
#media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}}
I've been searching for a simple way to make the sticky footer works.
I just applied a class="navbar-fixed-bottom" and it worked instantly
Only thing to keep in mind it's to adjust the settings of the footer for mobile devices.
Cheers!
For those who are searching for a light answer, you can get a simple working example from here:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px /* Height of the footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* Example value */
}
Just play with the body's margin-bottom for adding space between the content and footer.
I will elaborate on what robodo said in one of the comments above, a really quick and good looking and what is more important, responsive (not fixed height) approach that does not involve any hacks is to use flexbox. If you're not limited by browsers support it's a great solution.
HTML
<body>
<div class="site-content">
Site content
</div>
<footer class="footer">
Footer content
</footer>
</body>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
}
Browser support can be checked here: http://caniuse.com/#feat=flexbox
More common problem solutions using flexbox: https://github.com/philipwalton/solved-by-flexbox
Not sure what you have tried so far, but its pretty simple. Just do this: http://plnkr.co/edit/kmEWh7?p=preview
html, body {
height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
Since it's in bootstrap 3, the site will be using jQuery. So the solution could also be the following, instead of trying to play with complex CSS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.my-footer {
border-radius : 0px;
margin : 0px; /* pesky margin below .navbar */
position : absolute;
width : 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Content of any length -->
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
asdfasdfasdfasdfs <br />
</div>
</div>
<div class="navbar navbar-inverse my-footer">
<div class="container-fluid">
<div class="row">
<p class="navbar-text">My footer content goes here...</p>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var $docH = $(document).height();
// The document height will grow as the content on the page grows.
$('.my-footer').css({
/*
The default height of .navbar is 50px with a 1px border,
change this 52 if you change the height of your footer.
*/
top: ($docH - 52) + 'px'
});
});
</script>
</body>
</html>
A different take on it, hope it helps.
Kind regards.
easily set
position:absolute;
bottom:0;
width:100%;
to your .footer
just do it
In case your html has the (rough) structure:
<div class="wrapper">
<div>....</div>
...
<div>....</div>
</div>
<div class="footer">
...
</div>
then the simplest css that fixes footer to the bottom of your screen is
html, body {
height: 100%;
}
.wrapper {
min-height: calc(100vh - 80px);
}
.footer {
height: 80px;
}
... where the height of the footer is 80px. calc calculates the height of the wrapper to be equal to the window's height minus the height of the footer (80px) which is out of the .wrapper
What worked for me was adding the position relative to the html tag.
html {
min-height:100%;
position:relative;
}
body {
margin-bottom:60px;
}
footer {
position:absolute;
bottom:0;
height:60px;
}
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
#media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use the sticky footer with a fixed navbar if need be, too.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy Martin Bean and Ryan Fait.</p>
</div>
</div>
Hi I have a container div for a page (called innercontent) and within that I have a div called tabs2. Tabs2 contains a tabbed navigation that allows content inside a div (within tab2) change. The content inside the div varies, so the height should expand itself if there is a lot of content in that div. The problem is that when changing the tabs in the content area, the div does not resize automatically, so the content cannot be seen. Here is the code:
CSS:
.innercontent {
overflow: hidden;
background-color:#FFF;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
.div2 {
position: absolute;
visibility: hidden;
width: 100%;
left: 0;
}
HTML:
<div id="tabs2">
<ul>
<li id="One">One
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Two">Two
<div class="div2">
<p>Insert content here</p>
</div>
</li>
<li id="Three">Three
<div class="div2">
<p>Insert content here</p>
</div>
</li>
</ul>
</div>
Are you sure they have to be absolute? As I don't think they need to be.You could look at using something such as jqueryui http://jqueryui.com/tabs/
Alternatively, amend your html and it should be easier.Essentially move the content divs outside of the but have a data-attribute that links them to a specific link. I'm assuming you use some js at the moment to manipulate showing and hiding as you currently have visibility:hidden. I've changed this to display:none in my example (as visibility still occupies space in the document. When a user clicks a link, hide all the divs by default, then show the one with the correct matching data-attribute.
I've created a fiddle at http://jsfiddle.net/9bH7s/ that shows this and the code is below.
html
<div class="innercontent">
<div id="tabs2">
<ul>
<li id="One">One
</li>
<li id="Two">Two
</li>
<li id="Three">Three
</li>
</ul>
<div class="div2" data-id="first">
<p>Insert content here</p>
</div>
<div class="div2" data-id="sec">
<p>Insert content here</p>
</div>
<div class="div2" data-id="third">
<p>Insert content here this has a lot more <br /><br />and some more content</p>
</div>
</div>
</div>
css
.innercontent {
overflow: hidden;
background-color:#efefef;
padding:24px 30px;
border-radius:5px;
}
#tabs2 {
width: 100%;
height:100%;
}
#tabs2 ul li{
float:left;
list-style:none;
margin-left:10px;
}
.div2 {
display:none;
width: 100%;
clear:both;
}
js
$('#tabs2').delegate('a','click',function(){
$('.div2').hide();
$('.div2[data-id=' + this.id +']').show();
});
1st change::dont indicate any height for .tab2..it will take an automatic height corresponding to the item that it contains
2nd change: you have made position:absolute; and expecting it to be dynamic.how that can be possible.remove it..either make it position:relative; or better choice is not to mention position property at al ...you can use margin-left:100px; to position your div
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.