Bootstrap 3 Navbar won't collapse on mobile br

Question

My Rails 4 site with the latest version of bootstrap will not collapse in mobile however if I open the site on desktop and shrink the window, it will collapse. Here is the code for my navbar:

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <a href = "/" class = "navbar-brand" style="color: white;">Earn And Learn</a>
        <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
    <div class = "collapse navbar-collapse navHeaderCollapse">
            <ul class = "nav navbar-nav navbar-right">
            <li id="nav_ach"><a href = "/about/achievements" style="color: white;">Achievements</a></li>
            <li id="nav_faq"><a href = "/about/faq" style="color: white;">FAQ</a></li>
            <li id="nav_test"><a href = "/about/testimonials" style="color: white;">Testimonials</a></li>
            <li id="nav_news"><a href = "/about/news" style="color: white;">In the News</a></li>
                <li id="nav_steal"><a href = "/steal/index" style=" color: white;">Steal This Idea!</a></li>
                <li><a href = "#" data-toggle="modal" data-target="#myModal" style="color: white;">Contact Us</a></li>
            </ul>
    </div>
</div>
</div>

Answer 1

Dug through the github issues and it turns out we're missing this

<meta name="viewport" content="width=device-width, initial-scale=1.0">

http://getbootstrap.com/css/#overview-mobile

https://github.com/twbs/bootstrap/issues/10550

Answer 2

This isnt standard bootstrap3. Look at the examples page to learn the syteax of bootstrap. At bootstrap3 there are other important classes to make it collapse. Look at the Examples or at my page to learn the basic code.

Answer 3

there is missing the id of collapse

it must be

<div class = "navbar navbar-inverse navbar-static-top">
    <div class = "container">
        <a href = "/" class = "navbar-brand" style="color: white;">
            Earn And Learn
        </a>
        <button class="navbar-toggle" data-toggle="collapse" 
        data-target= ".navHeaderCollapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
        </button>
    <div class = "collapse navbar-collapse" id="navHeaderCollapse">
            <ul class = "nav navbar-nav navbar-right">
            <li id="nav_ach"><a href="/about/achievements" 
            style="color: white;">Achievements</a></li>
            <li id="nav_faq"><a href="/about/faq" 
           style="color: white;">FAQ</a></li>
            <li id="nav_test"><a href = "/about/testimonials" 
            style="color: white;">Testimonials</a></li>
            <li id="nav_news"><a href = "/about/news" style="color: white;">
                In the News</a></li>
                <li id="nav_steal"><a href = "/steal/index" 
                 style="color: white;">Steal This Idea!</a></li>
                <li><a href = "#" data-toggle="modal" data-target="#myModal" 
                      style="color: white;">Contact Us</a></li>
            </ul>
    </div>
</div>
</div>

Answer 4

You can use meta tag for providing device screen width

<meta name="viewport" content="width=device-width">