title: Bootstrap navbar collapse not working on mobile devices
body: <p>If I resize my browser It works perfectly, but if I access it from my phone/tablet it loads the uncollapsed desktop version, and incorrectly at that. </p>
  
  <p>Any issues with my html?</p>
  
  <pre><code>&lt;nav class="navbar navbar-custom navbar-fixed-top" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"&gt;
          &lt;i class="fa fa-bars"&gt;&lt;/i&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand page-scroll" href="/"&gt;
          &lt;i class="fa fa-car"&gt;&lt;/i&gt;  &lt;span class="light"&gt;Title&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse navbar-right navbar-main-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="hidden"&gt;
            &lt;a href="#page-top"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#about"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Heres the relevant styles as well...</p>
  
  <pre><code>    .navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    @media(max-width: $screen-xs-max) {
      background-color: #000;
    }
  }
  
  .navbar-custom .navbar-brand {
    font-weight: 700;
  }
  
  .navbar-custom .navbar-brand:focus {
    outline: 0;
  }
  
  .navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
  }
  
  .navbar-custom .navbar-brand .navbar-toggle:focus,
  .navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
  }
  
  .navbar-custom a {
    color: darken(#fff, 20%);
  }
  
  .navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
  }
  
  .navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(255,255,255,.8);
    background-color: transparent;
  }
  
  .navbar-custom .nav li a:focus,
  .navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
  }
  
  .navbar-custom .nav li.active {
    outline: 0;
  }
  
  .navbar-custom .nav li.active a {
    background-color: rgba(255,255,255,.3);
  }
  
  .navbar-custom .nav li.active a:hover {
    color: #fff;
  }
  
  @media(min-width:768px) {
    .navbar-custom {
      padding: 20px 0;
      border-bottom: 0;
      letter-spacing: 1px;
      background: 0 0;
      -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
      -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
      transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
  
    .navbar-custom.top-nav-collapse {
      padding: 0;
      border-bottom: 1px solid rgba(255,255,255,.3);
      background: url('home/wood2.jpg') no-repeat center center fixed;  }
  }
  </code></pre>
  
  <p>I'm using bootstrap-sass on rails 4 if it means anything.</p>
  
  <p>Thanks!</p>