Bootstrap navbar-fixed-bottom covers content - html

Question

My bootstrap navbar-bottom covers content when I need to scroll the page. I've already tried to set the padding-bottom to 65px of the body but that didn't help.
My HTML
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>
My CSS
body {
padding-bottom: 65px;
padding-top: 65px;
}
Could anyone help me out please :D Thanks in advance.

Answer 1

The existing answer doesn't work, but it is close. Instead of adding the margin to the html element or the body element (which include the footer and the overlapped content), it's necessary to add the margin to the element that contains the content, at the same level as the footer; the .main-content div.
.main-content {margin-bottom: 65px}
p {padding:2em; border: 1px dashed #CCC}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid main-content">
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
<p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
<p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
<p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
<p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
</div>
</div>
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>

Answer 2

Add bottom margin to HTML instead of padding to body. This will prevent the footer from covering the content when scrolling to end of page. If you don't want the footer to cover at all then you'll have to use another approach instead of a fixed position.
html { margin-bottom: 65px }
jsFiddle: https://jsfiddle.net/azizn/b7Lq56kt/
html {margin-bottom: 65px}
p {padding:2em; border: 1px dashed #CCC}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid">
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
<p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
<p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
<p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
<p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
</div>
</div>
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>

Answer 3

<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
...
</nav>
</div>
.container {
padding-top: 65px;
}
Wrap the nav with class .fixed-bottom with a .container <div> and give the parent <div> .padding-top.