0

I am trying to code my team's website. The navbar will not collapse on mobile screens. I added the "data-target" to target the class in the list. When clicking the button, the list should collapse, but it doesn't.

<!-- Navbar -->

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
        <div class="collapse navbar-collapse navHeaderCollapse" style="height: 0.866667px;">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>
Hive Voltage
  • 47
  • 2
  • 6
  • Is this a duplicate of: http://stackoverflow.com/questions/21203111/bootstrap-3-collapsed-menu-doesnt-close-on-click/22917099#22917099, or a different problem? – Kevin Nelson Mar 12 '15 at 21:41
  • @KevinNelson It is different. His navbar collapses on smaller devices, my navbar does not collapse at all. – Hive Voltage Mar 12 '15 at 21:48
  • I meant more to try the answers, not the question. Bootstrap's default behavior is to NOT close the menu. I've provided the answer from the other question as an answer below for you to try. – Kevin Nelson Mar 12 '15 at 21:54
  • @KevinNelson I added the js to the class and it still is not collapsing. The answer you gave is to fix the problem where the menu doesn't close, but my menu does not even open. There is nothing to close. – Hive Voltage Mar 12 '15 at 22:04
  • Ah, you said that "the list should collapse, but it doesn't"...that's very different from not opening. You might want to revise. Can you reproduce the problem in a bootply? – Kevin Nelson Mar 12 '15 at 22:07
  • Edit made to answer matching your HTML against a known working navbar – Kevin Nelson Mar 12 '15 at 22:13

2 Answers2

0
  1. Remove the style="height: 0.866667px;"
  2. Add a separate id tag for targetting by the dropdown and button (semantic practice).

  3. You have two navbar-header classes (Remove the second one and combine the button and the brand anchor. Here's a jsfiddle of the working navbar: https://jsfiddle.net/AndrewL32/e0d8my79/6/

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/Home">Team 3774</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHead"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navHead"> <ul class="nav navbar-nav pull-right"> <li><a href="/Team Bio">Team Bio</a></li> <li><a href="/Our Coach">Our Coach</a></li> <li><a href="/Gallery">Gallery</a></li> <li><a href="/Outreach">Outreach</a></li> <li><a href="/Youtube">Youtube</a></li> </ul> </div> </div> </div>

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
0

Try this out:

<div class="navbar navbar-inverse navbar-fixed-top" role="banner">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/Home">Team 3774</a>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse" role="navigation">
            <ul class="nav navbar-nav">
                <li><a href="/Team Bio">Team Bio</a></li>
                <li><a href="/Our Coach">Our Coach</a></li>
                <li><a href="/Gallery">Gallery</a></li>
                <li><a href="/Outreach">Outreach</a></li>
                <li><a href="/Youtube">Youtube</a></li>
            </ul>
        </div>
    </div>
</div>
Kevin Nelson
  • 7,613
  • 4
  • 31
  • 42
  • I dont think adding a script for this is necessary. The default bootstrap script for the dropdown should work so there must be something wrong with the markup – AndrewL64 Mar 12 '15 at 21:56
  • @AndrewLyndem, I've worked with bootstrap 3 a LOT, and the menu does NOT close by default for navigation that does not redirect you to a different page (e.g. single page app), as per here: https://github.com/twbs/bootstrap/issues/9013 – Kevin Nelson Mar 12 '15 at 21:58
  • @AndrewLyndem The site is www.robotichive3774.com You can view all of the elements there, as my code is really messy (because i am beginning) so there is a lot of unnecessary stuff. – Hive Voltage Mar 12 '15 at 22:10
  • Check my answer. I have updated it with the correct solution and the reason for why it's not working. The dropdown works without any extra scripts – AndrewL64 Mar 12 '15 at 22:12