0

I have a navbar footer for my webpage. There are 2 possible options that I know of: navbar-fixed-bottom and navbar-bottom. The problem is that I want my website to look good on different resolutions. On a high resolution that makes my whole website fit, navbar-fixed-bottom is ideal. If I use navbar-bottom, the footer stays at the bottom of the content, not at the bottom of the screen. On a low resolution, that makes it require scrolling, navbar-bottom is perfect, as I don't want to see the navbar everytime.

So basically I want the following behaviour: if the website fits on the screen, the footer should be at the bottom of the screen. If it doesn't fit, the footer should be at the end of the content. How can I achieve such behaviour?

Paul92
  • 8,827
  • 1
  • 23
  • 37
  • There are ***3*** classes for `navbar`s in bootstrap: `navbar-fixed-top`, `navbar-fixed-bottom` and `navbar-static-top`. Bootstrap doesn't officially support a `navbar-static-bottom`, which is what you're looking for. Also, this question has been asked *dozens* of times on SO alone, so I'm sure you can find something that works for you there. Try to do a bit more research before posting a duplicate question. – Tim Lewis Feb 23 '15 at 20:58

1 Answers1

0

Since you're already using Bootstrap, I'm assuming you're also using jQuery. And, since the CSS for those classes would be a pain to copy, here's a way to do it in jQuery:

$(document).ready(function () {
    if ($(window).width > idealSiteWidth) {
        $(".navbar").removeClass("navbar-fixed-bottom");
        $(".navbar").addClass("navbar-bottom");
    } else {
        $(".navbar").addClass("navbar-fixed-bottom");
        $(".navbar").removeClass("navbar-bottom");
    }
});
Joshua Whitley
  • 1,196
  • 7
  • 21