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 Bootstrap Basics Using Bootstrap Components Inline Navs and Dropdown Buttons

Posted by Jose Corea
Jose Corea
6,288 Points

How Do I get dropdown nav and top nav bar to both work when screen is smaller?

I was only able to get the footer nav bar to dropdown once I copied the full 3 JS script snippet at the end of my HTML doc. Ex.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

However, doing that now causes my top nav bar to not drop down when it enters a smaller viewport screen. I had originally gotten the top nav bar in the header to work only by copying a shortened 1-script JS snippet to the end of my html code.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

Can someone help me trouble shoot how to get both header and footer nav bars to drop down. At the moment, I only have the option of getting either the footer drop down to open if I include all three JS scripts, or the top nav to turn into a functional drop-down in smaller screens to function if I add only the one JS bootstrap snippet.

1 Answer

Angel Angelov
Angel Angelov
20,250 Points
Angel Angelov
Angel Angelov
20,250 Points

Maybe you have already found the answer but I had the same issue. The code from bootstrap website had an extra text that made my drop-down button not to work.

This part:

  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">

I changed data-bs-toggle to data-toggle and it works now.

I have also had issues with the navbar in small screens as it did not allow clicking but managed to fix too. Let me know if you still have the problem and will have a look.