5 <meta http-equiv=
"X-UA-Compatible" content=
"IE=edge">
6 <meta name=
"viewport" content=
"width=device-width, initial-scale=1">
7 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8 <meta name=
"description" content=
"">
9 <meta name=
"author" content=
"">
10 <link rel=
"icon" href=
"../../favicon.ico">
12 <title>Sticky Footer Navbar Template for Bootstrap
</title>
14 <!-- Bootstrap core CSS -->
15 <link href=
"../../dist/css/bootstrap.min.css" rel=
"stylesheet">
16 <link href=
"../../dist/css/bootstrap-rtl.min.css" rel=
"stylesheet">
18 <!-- Custom styles for this template -->
19 <link href=
"sticky-footer-navbar.css" rel=
"stylesheet">
21 <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
22 <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
23 <script src=
"../../assets/js/ie-emulation-modes-warning.js"></script>
25 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
27 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
28 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
35 <nav class=
"navbar navbar-default navbar-fixed-top">
36 <div class=
"container">
37 <div class=
"navbar-header">
38 <button type=
"button" class=
"navbar-toggle collapsed" data-toggle=
"collapse" data-target=
"#navbar" aria-expanded=
"false" aria-controls=
"navbar">
39 <span class=
"sr-only">Toggle navigation
</span>
40 <span class=
"icon-bar"></span>
41 <span class=
"icon-bar"></span>
42 <span class=
"icon-bar"></span>
44 <a class=
"navbar-brand" href=
"#">Project name
</a>
46 <div id=
"navbar" class=
"collapse navbar-collapse">
47 <ul class=
"nav navbar-nav">
48 <li class=
"active"><a href=
"#">Home
</a></li>
49 <li><a href=
"#about">About
</a></li>
50 <li><a href=
"#contact">Contact
</a></li>
52 <a href=
"#" class=
"dropdown-toggle" data-toggle=
"dropdown" role=
"button" aria-expanded=
"false">Dropdown
<span class=
"caret"></span></a>
53 <ul class=
"dropdown-menu" role=
"menu">
54 <li><a href=
"#">Action
</a></li>
55 <li><a href=
"#">Another action
</a></li>
56 <li><a href=
"#">Something else here
</a></li>
57 <li class=
"divider"></li>
58 <li class=
"dropdown-header">Nav header
</li>
59 <li><a href=
"#">Separated link
</a></li>
60 <li><a href=
"#">One more separated link
</a></li>
64 </div><!--/.nav-collapse -->
68 <!-- Begin page content -->
69 <div class=
"container">
70 <div class=
"page-header">
71 <h1>Sticky footer with fixed navbar
</h1>
73 <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 with
<code>padding-top:
60px;
</code> on the
<code>body
> .container
</code>.
</p>
74 <p>Back to
<a href=
"../sticky-footer">the default sticky footer
</a> minus the navbar.
</p>
77 <footer class=
"footer">
78 <div class=
"container">
79 <p class=
"text-muted">Place sticky footer content here.
</p>
84 <!-- Bootstrap core JavaScript
85 ================================================== -->
86 <!-- Placed at the end of the document so the pages load faster -->
87 <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
88 <script src=
"../../dist/js/bootstrap.min.js"></script>
89 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
90 <script src=
"../../assets/js/ie10-viewport-bug-workaround.js"></script>