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 window smaller or view it on a phone.

http://warm-ocean-8133.herokuapp.com/

Here's my html in jade template format.

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.brand(href='#home') Miles Matthias
      .nav-collapse
        ul.nav
          li.active
            a(href='#home') Home
          li
            a(href='#contact') Contact

Answer 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:

<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">

Answer 2

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>