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

Posted by amirbizimana
amirbizimana
9,639 Points

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>
          </button>
         <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>
            </ul>
           <h3 class="text-primary">A | B</h3>
       <p class="text-primary">Web Designer & Developer</p>
            </div>
          </div>
       </nav><!-- Navigation end -->

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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">
amirbizimana
amirbizimana
9,639 Points

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 !