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 4 Basics (Retired) Building Forms with Bootstrap Custom CSS

Harish Yerra
Harish Yerra
10,031 Points
Posted by Harish Yerra
Harish Yerra
10,031 Points

Collapsible 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">
        &#9776;
      </button>
    </nav>

    <!--  /navbar  -->
Kevin Foytik
Kevin Foytik
14,553 Points

Can you include your code for reference?

2 Answers

Abdirahman Shire
Abdirahman Shire
12,987 Points
Abdirahman Shire
Abdirahman Shire
12,987 Points

the 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">
    &#9776;
  </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
Harish Yerra
10,031 Points
Harish Yerra
Harish Yerra
10,031 Points

Sweet thanks for your help :)

Abdirahman Shire
Abdirahman Shire
12,987 Points
Abdirahman Shire
Abdirahman Shire
12,987 Points

this 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">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
      ```
and close the div.