Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

Why isn't my Bootstrap mobile nav menu toggling?

If you take a look at my site that I am slowly building here: http://www.dealerbyte.co.uk/

Now if you scale the view-port you will notice that the navbar changes into a fixed-top navbar, however the toggle button on the left doesn't work and the menu is always displaying, it cant be closed .

My question is what am I missing I am obviously missing some sort of Bootstrap component however I am not sure what?

Here is the HTML

<div class="navbar navbar-default nav-links navbar-fixed-top hidden-md hidden-lg">
  <div class="container">
    <button class="visible-sm visible-xs navbar-toggle" data-target="#i-want-this-to-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
    </button>
      <a class="mini-navbar navbar-brand" href="/">
        <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav mini-navbar" />
      </a>
    <ul class="nav navbar-nav">
      <li><a href="#">Used Cars</a>
      </li>
      <li><a href="#">Get Finance</a>
      </li>
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About Driven<strong class="caret"></strong></a>
        <ul class="dropdown-menu">
          <li> <a href "#">The Team</a>
          </li>
          <li> <a href "#">Our Partners</a>
          </li>
        </ul>
      </li>
      <li><a href="#">How To Find Us</a>
      </li>
      <li><a href="#">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

Here is the CSS:

.mini-navbar {
    opacity: 1;
    padding: 5px 0;
}

@media only screen and (max-width : 992px) {
    /*body {display: none;}*/
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav {
        float: none;
    }
    .nav.navbar-nav {
        clear: both;
        float: left;
        margin: 0 0 0 -15px;
        width: 100%;
    }
    .navbar-default .navbar-nav>li>a {
        border: none;
    }

    .navbar-nav > li:last-child {
        border: none;
    }
    .navbar-default {

    }
}

Any idea where I am going wrong?

3 Answers

david johnson
david johnson
7,371 Points
david johnson
david johnson
7,371 Points

Can you post the head area of the page as code?

I am assuming there is a JQuery link missing or something like that, because correct me if I am wrong, i think that menu is usually driven with JQuery.

nicholas maddren
nicholas maddren
12,793 Points
nicholas maddren
nicholas maddren
12,793 Points

Yes the JQuery source is properly linked :(

david johnson
david johnson
7,371 Points
david johnson
david johnson
7,371 Points

I actually noticed that right after I opened the inspector.

david johnson
david johnson
7,371 Points
david johnson
david johnson
7,371 Points

Could you show me a link on the bootstrap page that references this type of menu, I can't seem to find it. I am noticing too, and correct me if I am wrong, that there isn't a call to the menu js in the main page... just a call to masterslider and bootstrap and the masterslider set-up.

Shemaya Spero
Shemaya Spero
3,607 Points
Shemaya Spero
Shemaya Spero
3,607 Points

may be the problem is in the data-target,try changing this: 

 data-target="#i-want-this-to-collapse"