Twitter Bootstrap Responsive Navbar Broken on Small Screens

Question

I\'ve been reading the docs and comparing my code to Bootstrap\'s examples, but I cannot figure out why the navbar on my site drops down about 100px when I make my browser windo

Answer 1

You can use @media to override the body padding. Like this:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {
    body {
      padding-top: 0;
    }
  }
</style>

Answer 2

The visual anomaly appears because you defined the top padding for the body element after including the bootstrap-responsive.css file, which means that the "responsive" styles are unable to override your padding:

<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/bootstrap-responsive.css" rel="stylesheet">
<!-- ... some stuff -->
<style type="text/css">body {padding-top: 60px;}</style>

You want the padding to be used when the page is displayed at full width (so that your main content doesn't get displayed underneath the top navbar), but you want the "responsive" styles to override that padding when you shrink the browser width (or display the page on a mobile device).

So the fix is simple: define the top padding for the body element between your inclusion of bootstrap.css and bootstrap-responsive.css.

The Bootstrap samples are a great template to use to get started. The fluid layout site does it like this:

<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px 0;
  }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">