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) Using Bootstrap Components Building a Navbar

Patrick Vanegas
Patrick Vanegas
6,971 Points
Posted by Patrick Vanegas
Patrick Vanegas
6,971 Points

Navigation from the div isn't showing

The only thing I see is the "navbar" and powered by treehouse text, but I don't see the home, about, speakers, and scheudule links. 

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-       controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>

          <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                      <li class="nav-item active">
                        <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>
            </div>
          <!-- navbar-brand is used for these types of text -->
          <a class="navbar-brand" href="http://teamtreehouse.com">Presented by Treehouse</a>
</nav>

4 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I could only see it when I put your code in a code block, but there seems to be a big gap in the middle of one of the attributes on the button that I think Bootstrap looks for to add the collapsing functionality:

aria-       controls="navbarNav"

You might have accidentally added a newline or something. Try removing that and see if it works.

Patrick Vanegas
Patrick Vanegas
6,971 Points
Patrick Vanegas
Patrick Vanegas
6,971 Points

Fixed it and literally copied the same code from the teacher's notes, and I'm still getting the same error. The only problem is that I can't see the nav-link items.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Disabled</a> </li> </ul> </div> </nav>

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hmmm can you please share a snapshot of your workspace?

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Sorry Patrick Vanegas, I really don't know how to help here. Perhaps Guil Hernandez can?

It looks like Bootstrap has changed quite a bit since this video was shot. Hopefully an updated video will be release soon.

Jack Blankenship
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points
Jack Blankenship
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points

See if this gets your page working

        <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">

          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="container">
          <a class="navbar-brand" href="#">Navbar</a>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">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 hidden-xs-down" href="http://www.treehouse.com">Presented by Treehouse</a>
         </div>
        </div>
        </nav>
Anthony Scott
PLUS
Anthony Scott
Courses Plus Student 9,001 Points
Anthony Scott
Anthony Scott
Courses Plus Student 9,001 Points

In the code in the techer's note, there seems to beem a hidden button to the right of the Navbar text. Clicking expands the navbar and you can see the entries. I removed all this with this code and I can see my entries now:

        <!--navbar-->
            <nav class="navbar navbar-inverse bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>

    <div class="navbar-nav">
      <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>

  </div>
</nav>
        <!-- /navbar-->