Question

So I have seen countless of these here on stack. and people keep saying, your missing something and so on. How ever I have triple checked and I am pretty sure I am not missing anything:

This is what the page looks like shrunk down:

And this is what my Navigation Source Looks like:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Project name</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#">Test Link</a></li>
            <li><a href="#">Test Link</a></li>
            <li><a href="#">Test Link</a></li>
            <li><a href="#">Test Link</a></li>
        </ul>
      </div>

    </div>
  </div>
</div>

Any idea as to why it will not shrink down and give me the button for touch devices? that little drop down thing?

Note: I do have the view port meta tag and the responsive css, as well as the javascript and jquery all on the page (from my understanding all I need is the responsive css)

Answer 1

one error I see is data-target=".navbar-responsive-collapse" should be data-target=".nav-collapse"

otherwise it seems to work fine in a fiddle – http://jsfiddle.net/eNF97/ so something else must be missing. check to make sure the correct path to the responsive file..