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

Gary Cardinale
PLUS
Gary Cardinale
Courses Plus Student 1,944 Points
Posted by Gary Cardinale
Gary Cardinale
Courses Plus Student 1,944 Points

In mobile view, when you click the toggle menu, the dropdown menu appears to the left of the toggle, not under.

This happens in Chrome, IE 11, Firefox on Windows and Mac. It works right in Safari

Samuele Legrenzi
Samuele Legrenzi
11,386 Points
Samuele Legrenzi
Samuele Legrenzi
11,386 Points

Try like this: insert in a div tag the button and the brand.

<!-- Navbar --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" 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>

    <div class="navbar-collapse collapse in">

      <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-toggle="dropdown" data-target="#">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 class="divider"></li>
            <li><a href="#">Plans &amp; Pricing</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div><!-- End navbar -->

1 Answer

Barbara Wiacek
Barbara Wiacek
9,901 Points
Barbara Wiacek
Barbara Wiacek
9,901 Points

You need to put both the "button" and "a" elements inside a div with a class "navbar-header". No idea why this isn't mentioned in the video.

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
    </div>
</nav>
Nataly Diem
Nataly Diem
9,701 Points
Nataly Diem
Nataly Diem
9,701 Points

I was having the same problem and this fixed it, thank you so much!!