Twitter Bootstrap Responsive Navbar Broken On Small Screens

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 window sma

Solution 1:

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:

<linkhref="/stylesheets/bootstrap.css"rel="stylesheet"><linkhref="/stylesheets/bootstrap-responsive.css"rel="stylesheet"><!-- ... some stuff --><styletype="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 --><linkhref="../assets/css/bootstrap.css" ><styletype="text/css">body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .sidebar-nav {
    padding: 9px0;
  }
</style><linkhref="../assets/css/bootstrap-responsive.css" >

Solution 2:

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

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