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 Framework Basics Prototyping with Bootstrap Build a Dropdown Menu

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 35,157 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 35,157 Points

Seems to work in preview but doesn't pass challenge.

I've looked at the bootstrap docs and past forum answers and can't figure this one out at all. It also seems to work in the preview. There are so many options in the documentation. What am I missing here? It's part 2 of the Frameworks basic challenge and I am trying to build a toggling dropdown menu off the link element in line 25. Thanks in advance.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-muted" href="#">Ribbit</a>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About Ribbit</a></li>
            <li class="dropdown">
              <a data-target=".navbar-collapse" data-toggle="collapse">Treehouse<b class="caret"></b></a>
              <ul>
                <li><a href="#">About Treehouse</a></li>
                <li><a href="#">Video Library</a></li>
                <li><a href="#">Learning Adventures</a></li>
                <li><a href="#">Plans &amp; Pricing</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div><!-- End navbar -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Nancy,

The reason for the "Bummer" is you gave just a bit more than what the challenge was asking for. You also altered the data-target when the challenge only asked for "the data attribute for toggling..." Line 25 should be:

<a data-target="#" data-toggle="dropdown">Treehouse<b class="caret"></b></a>

Keep Coding! :smiley:

Adam Pengh
Adam Pengh
29,881 Points
Adam Pengh
Adam Pengh
29,881 Points

For the 1st challenge on line 24, you want to add class="dropdown" to the li element.

For the 2nd challenge on line 25, you should leave data-target="#" and add data-toggle="dropdown".

For the 3rd challenge on line 26, you want to add class="dropdown-menu" to the ul element.

For reference, check out the bootstrap documentation here: http://getbootstrap.com/components/#navbar

<li class="dropdown">
  <a data-target="#" data-toggle="dropdown">Treehouse<b class="caret"></b></a>
  <ul class="dropdown-menu">
    <li><a href="#">About Treehouse</a></li>
    <li><a href="#">Video Library</a></li>
    <li><a href="#">Learning Adventures</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Plans &amp; Pricing</a></li>
  </ul>
</li>