navbar-static-bottom overlapping content above it/not located at bottom anymore

Question

Here's the HTML code when my footer navbar is fixed, which is fine, but when it's static (shown here), it not only lengthens, thus overlapping the items above it, but it also is no longer docked at the bottom of the page. What do I have to do to bring it back down and bring it back to its original size? Thanks !

Answer 1

Issue(s) with your navbar:

1. The navbar is wrapped inside the container and row for the col-lg-9. So, you have to fix that first. Close the row and the container after the column. Then your navbar won't be "overlapping" everything.

2. Finally, there is no navbar-static-bottom class in the bootstrap.css. So, it's just going to be a plain old navbar, which means it will inherit a bottom margin of 20px from the navbar class, so unless you specify your own styles to override that, it won't ever be at the very bottom of the page.

HTML:

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="page-header">
                        <h3>Lorem <small>ipsum</small></h3>
                    </div><!--pg header-->
                    <img class="featuredImg" src=".jpg" width="100%">
                    <p>Lorem ipsum</p>
                    <h4>A heading</h4>
                    <p>Lorem ipsum</p>
                </div><!--panel body-->
            </div><!--panel-->
        </div><!--col-lg-9-->
    </div><!--row-->
</div> <!--container-->
<div class="navbar navbar-default navbar-static-bottom">
    <div class="container">
        <p class="navbar-text pull-daft">© 2014 </p>
        <a href="" class="navbar-btn btn-danger btn navbar-right">Button</a>
    </div><!--container-->
</div><!--navbar-->

EDIT:

Sorry for the lecture since it wasn't your markup...

To roll your own .navbar-static-bottom class, I would just use the same rules as the .navbar-static-top and change the margin-bottom to 0. You could even add a 20px margin top.

.navbar-static-bottom {
    border-radius: 0;
    z-index: 1000;
    border-width: 0 0 1px;
    padding-right: 0;
    padding-left: 0;
    margin: 20px 0 0;
}