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 trialHarish Yerra
10,031 PointsCollapsible Navbar is showing collapsed content above the navbar and not below the navbar. How to fix?
I just finished building my navbar and everything looks great except for one stubborn issue! In the issue Guil Hernandez has the navbar showing collapsed content below the navbar. In my case though, the navbar is always showing collapsed content above the navbar. Adding the navbar-fixed-top
makes it so that the collapsed content won't even appear when I click the button! How in the world do I make the navbar show collapsed content below the navbar.
Here is my code:
<!-- navbar -->
<nav class="navbar navbar-fixed-top navbar-dark bg-primary hidden-xs-down">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
</div>
</nav>
<!-- /navbar -->
<!-- navbar -->
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-primary navbar-dark container-fluid">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
</div>
</div>
<nav class="navbar navbar-dark navbar-fixed-top bg-primary hidden-sm-up">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
</nav>
<!-- /navbar -->
2 Answers
Abdirahman Shire
12,987 Pointsthe whole nav code snippet
<!-- nav-->
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
</ul>
<a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down">Prsented by Treahouse</a>
</div>
</div>
</nav>
<!-- /nav-->
Harish Yerra
10,031 PointsSweet thanks for your help :)
Abdirahman Shire
12,987 Pointsthis is how you cam make navbar collapse. place these code snippets between the first nav and div container.
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
```
and close the div.
Kevin Foytik
14,553 PointsKevin Foytik
14,553 PointsCan you include your code for reference?