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

HTML

Posted by Stephanie Roberts
Stephanie Roberts
16,757 Points

Bootstrap Navbar toggle button not working

When I shrink the window and click the button it doesn't work. Button doesn't respond. What seems to be the problem here could anyone tell me please?

4 Answers

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

How to I fix this?

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

I can't tell you how to fix it without seeing either it or the code.

Like I said it's either a JavaScript error if you have been putting your own it or when the screen resizes Bootstrap is hiding the element you are toggling.

If you are pursuing web development I would highly suggest familiarising yourself with the web inspector function of your browser (or install FireBug) which will allow you to view Dom elements and see what is happening

Stephanie Roberts
Stephanie Roberts
16,757 Points
Stephanie Roberts
Stephanie Roberts
16,757 Points

``` <div class="navbar navbar-default navbar-fixed-top"> <div class="container">

    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar.collapse" aria-expanded-"false" aria-controls="navbar">
    <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="main-logo pull-left" href="#"><h2>Stephanie Roberts</h2><p class="second-heading"> Web designer &amp; developer</p></a>

    <div id="navbar" class="collapse navbar-collapse">
        <ul class="main-nav nav nav-pills pull-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    </div>
</div> ```
Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

Have you implemented the navbar which is being toggled? The target you have set is .navbar.collapse so the class of the navbar must be class="navbar collapse" - however collapse style from memory actually hides it in a sense. You may want to try changing you're data target to just .navbar

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function(){ $('.nav-tabs a:first').tab('show'); }); </script> </body>

Make sure this scrip is at the end of the body tag.

Jayden Spring
Jayden Spring
8,625 Points
Jayden Spring
Jayden Spring
8,625 Points

Bring up the developer console in your browser. From memory Bootstrap will use JavaScript to toggle the element the button is toggling.

If you look at the error console it will tell you what's going wrong - most likely the element is being removed when you resize the screen.