Twitter Bootstrap 3 fixed navbar collapse in horizontal mode

Question

Update: So, I totally misdiagnosed the problem. Looks like the collapse work fine as it should collapse on @grid-float-breakpoint which is set to @screen-sm-min but for some reason navbar is now collapsed in horizontal mode by default. Which is what I am debugging right now.

The navbar collapse works fine on most resolutions. It collapse fine on extra small devices and shows up as expected on medium and large devices. but not for small resolutions such as an iPad (1024×768), the bar collapse but the icon doesn't show up!!!

Here is my code:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand"><img src='assets/logo.png'/></a>
  </div>
    <div class="navbar-inverse-collapse collapse">
      <ul class="nav navbar-nav">
        <li><%= link_to("Games", games_path) unless current_page?(games_path) %></li>
      </ul>
      <form class="navbar-form navbar-right global-search">
          <input type="text" id="global-search" class="form-control col-lg-8" placeholder="Instant search">
      </form>
    </div><!--/.nav-collapse -->
</div>

Any idea why this is happening? Using tbs 3.2.0 on a Ruby on Rails 4.1 application

Answer 1

When the navbar collapse the icon is 'removed'. Instead u see 3 lines(the default collapsed navbar icon) if u change that particular icon it will show up instead of the lines

Answer 2

So, I figured out my issue. The collapsed area didn't have the "navbar-collapse" class in it which was needed for collapse to function properly. So instead of:

<div class="navbar-inverse-collapse collapse">

It should have been:

<div class="navbar-inverse-collapse navbar-collapse collapse">