Bootstrap 4 sticky bottom nav
My current navbar:
<nav class="navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="">page 1</a></li>
<li><a href="">page 2</a></li>
<li><a href="">page 3</a></li>
</ul>
</div>
</nav>
How can I make it so that even if the content isn't enough to "push" it down, it's at the bottom? navbar-fixed-bottom
doesn't work because it overlaps with the content if it hits the bottom.
+3
source to share
1 answer
What "fixed" does is it comes before other elements, not below them. Just put a couple of blank lines at the bottom of the page, or better, add CSS padding-bottom
to your page container.
Here's an example, adjust the padding value to whatever you want:
.page-container {
padding-bottom: 200px;
}
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" />
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><a href="">page 1</a></li>
<li><a href="">page 2</a></li>
<li><a href="">page 3</a></li>
</ul>
</div>
</nav>
<div class="page-container">
<p>first line</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>last line</p>
</div>
+2
source to share