2013-01-10 04:53:42 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2013-01-19 18:34:08 +01:00
< title > Sticky footer with navbar template · Bootstrap< / title >
2013-01-10 04:53:42 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2013-01-19 18:34:08 +01:00
<!-- Bootstrap core CSS -->
2013-01-10 04:53:42 +01:00
< link href = "../assets/css/bootstrap.css" rel = "stylesheet" >
2013-01-19 18:34:08 +01:00
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9]>
< script src = "../assets/js/html5shiv.js" > < / script >
< script src = "../assets/js/respond/respond.min.js" > < / script >
<![endif]-->
<!-- Fav and touch icons -->
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "../assets/ico/apple-touch-icon-144-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "../assets/ico/apple-touch-icon-114-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" sizes = "72x72" href = "../assets/ico/apple-touch-icon-72-precomposed.png" >
< link rel = "apple-touch-icon-precomposed" href = "../assets/ico/apple-touch-icon-57-precomposed.png" >
< link rel = "shortcut icon" href = "../assets/ico/favicon.png" >
<!-- Custom styles for this template -->
< style >
2013-01-10 04:53:42 +01:00
/* 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. */
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
< / style >
< / head >
< body >
2013-01-19 18:34:08 +01:00
<!-- Wrap all page content here -->
2013-01-10 04:53:42 +01:00
< div id = "wrap" >
<!-- Fixed navbar -->
< div class = "navbar navbar-fixed-top" >
2013-01-19 18:40:26 +01:00
< div class = "container" >
2013-02-01 19:34:25 +01:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
2013-01-19 18:40:26 +01:00
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
2013-02-01 19:34:25 +01:00
< / button >
2013-01-19 18:40:26 +01:00
< a class = "brand" href = "#" > Project name< / a >
< div class = "nav-collapse collapse" >
< ul class = "nav" >
< li class = "active" > < a href = "#" > Home< / a > < / li >
< li > < a href = "#about" > About< / a > < / li >
< li > < a href = "#contact" > Contact< / a > < / li >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Dropdown < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li > < a href = "#" > Action< / a > < / li >
< li > < a href = "#" > Another action< / a > < / li >
< li > < a href = "#" > Something else here< / a > < / li >
< li class = "divider" > < / li >
< li class = "nav-header" > Nav header< / li >
< li > < a href = "#" > Separated link< / a > < / li >
< li > < a href = "#" > One more separated link< / a > < / li >
< / ul >
< / li >
< / ul >
< / div > <!-- /.nav - collapse -->
2013-01-10 04:53:42 +01:00
< / div >
< / div >
<!-- Begin page content -->
< div class = "container" >
< div class = "page-header" >
< h1 > Sticky footer with fixed navbar< / 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. A fixed navbar has been added within < code > #wrap< / code > with < code > padding-top: 60px;< / code > on the < code > .container< / code > .< / p >
2013-01-19 18:39:56 +01:00
< p > Back to < a href = "./sticky-footer.html" > the default sticky footer< / a > minus the navbar.< / p >
2013-01-10 04:53:42 +01:00
< / div >
< div id = "push" > < / div >
< / div >
< div id = "footer" >
< div class = "container" >
< p class = "muted credit" > Example courtesy < a href = "http://martinbean.co.uk" > Martin Bean< / a > and < a href = "http://ryanfait.com/sticky-footer/" > Ryan Fait< / a > .< / p >
< / div >
< / div >
2013-01-19 18:34:08 +01:00
<!-- Bootstrap core JavaScript
2013-01-10 04:53:42 +01:00
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "../assets/js/jquery.js" > < / script >
< script src = "../assets/js/bootstrap-transition.js" > < / script >
< script src = "../assets/js/bootstrap-alert.js" > < / script >
< script src = "../assets/js/bootstrap-modal.js" > < / script >
< script src = "../assets/js/bootstrap-dropdown.js" > < / script >
< script src = "../assets/js/bootstrap-scrollspy.js" > < / script >
< script src = "../assets/js/bootstrap-tab.js" > < / script >
< script src = "../assets/js/bootstrap-tooltip.js" > < / script >
< script src = "../assets/js/bootstrap-popover.js" > < / script >
< script src = "../assets/js/bootstrap-button.js" > < / script >
< script src = "../assets/js/bootstrap-collapse.js" > < / script >
< script src = "../assets/js/bootstrap-carousel.js" > < / script >
< script src = "../assets/js/bootstrap-typeahead.js" > < / script >
< / body >
< / html >
