Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Toggle button

Im looking to have a toggle button toggle my navbar content at small screen sizes. The content hides and the toggle button appears as they should but the button won't toggle the content. I can't figure out what's missing:

<!-- Navigation -->
     <nav class="navbar fixed-top">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-      target="#navbarToggler" aria-expanded="false">
             <div class="icon-bar"></div>
             <div class="icon-bar"></div>
             <div class="icon-bar"></div>
         <div class="collapse navbar-collapse" id="navbarToggler">
           <div class= "container">
             <ul class= "nav navbar-nav nav-pills pull-right">
            <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="portfolio.html">Portfolio</a></li>
                <li role="presentation"><a href="blog.html">Blog</a></li>
            <li role="presentation"><a href="about.html">About</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
           <h3 class="text-primary">A | B</h3>
       <p class="text-primary">Web Designer & Developer</p>
       </nav><!-- Navigation end -->

1 Answer

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,719 Points

Hi Amir,

Functionally, I'm assuming the JavaScript is hooked up behind the scenes to actually perform the action the toggle button is meant to do.

But just in case, have a look at this part of the code.... It shouldn't matter but it's worth cleaning up to see if it fixes something (line 3 of your code snippet)

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarToggler" aria-expanded="false">

oh that's exactly what was going wrong ! My script links were not in the right order hence why the Javascript was not working. Thanks so much Jonathan !