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 Building a Navbar

Posted by Neha S
Neha S
7,290 Points

This course has outdated links, not working. Can someone pls help. I stuck on this . Navbar not expanding.

I am using as shown in vd, and used updated links from bootstrap website, but navbar not expanding. pls advice. TIA

2 Answers

Michael Kristensen
.a{fill-rule:evenodd;}techdegree seal-36
Michael Kristensen
Full Stack JavaScript Techdegree Graduate 26,251 Points

I've found that the problem is with the data-bs-toggle="collapse" and data-bs-target="#navbarNav" - which is the bootstrap version of the code; Guil uses data-toggle="collapse" and data-target="#navbarNav" - notice how there is no bs included? So, a quick rewrite of the Bootstrap Code, and you get; 

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" 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="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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 disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Now, another weird detail is, that in this color-scheme, there is no visual component to the NavBar Burger-Menu - But I guarantee you that there is an invisible and functional Burger-Menu on the right side of the NavBar!

stephane duboze
stephane duboze
3,891 Points
stephane duboze
stephane duboze
3,891 Points

Hey, maybe it's a bit late but, make sure your <div class="container"> wrap all you code except for the nav tag