0

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 !

michael
  • 167
  • 5
  • 23

1 Answers1

3

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;
}
jme11
  • 17,134
  • 2
  • 38
  • 48
  • Thanks, but half of that html you cleaned isn't even relevant - it was added when I ran it on bootply, i.e., the navbar wasn't originally wrapped in the container and row, and that footer code isn't even mine. Looking at this, my problem has to do more with my use of bootply than anything else, smh. Yeah, in regard to your fourth bullet, I noticed that, so how do I address this navbar separately in my CSS and format it - do I have to adjust the padding. I'm lost in that respect. – michael Jul 08 '14 at 21:25
  • Strange...maybe it somehow accidentally forked an existing bootply from someone else then. I updated my answer with a suggestion for a navbar-static-bottom class. – jme11 Jul 08 '14 at 21:40
  • Thanks, I just tried this out and adjusting the margin let me lower the navbar, but the farthest I can increase it is to 95px before a scrollbar appears. It's weird, because I'm only a few pixels shy of bringing it all the way down to where it's supposed to be. Is there any way to fix this? And in regard to the bootply stuff, it was my fault 'cause I was forking some code from other bootplys before saving that one. – michael Jul 08 '14 at 21:54
  • Hmm, that's weird - it's perfect [here](http://www.bootply.com/JevbxBMPwC) using your code. – michael Jul 08 '14 at 22:04
  • You know what, I just remembered, you had pull-right on the button, and I changed it to the navbar-right class. That pull-right could be screwing with things on your end. – jme11 Jul 08 '14 at 22:14
  • You know what, yeah, it's def an error on my side somewhere. Thanks for your cleaning up, your method solves the problem, and sorry about that bootply mess, lol. – michael Jul 08 '14 at 22:15
  • Stuff happens... glad you're on track with it. Much luck to you. – jme11 Jul 08 '14 at 22:15
  • lol @ starting off our comments the same way, and I didn't even catch that. Okay, I'll look into it. Thanks again. – michael Jul 08 '14 at 22:16