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

Posted by Craig Watson
Craig Watson
27,930 Points

Bootstrap Nav Mishap??

Hi everyone, I'm just following along with Guil Hernandez on the frameworks course and my nav is behaving a little different to Guil's.

When on a mobile sizes browser width and you click the menu icon, Guil's drops nicely below the fixed nav.

Mine seems to come over the top and look a little scrappy.. as if its missing some styles like padding or margin....

Here is the code below:

      <div class="navbar navbar-inverse navbar-fixed-top"><!-- NavBar -->

          <div class="container"><!-- NavBar Container-->

              <!-- Mobile Button -->
              <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>
              <!-- END** Mobile Button -->

              <a class="navbar-brand text-muted" href="#">Ribbit</a><!-- Site Name -->

              <div class="collapse navbar-collapse"><!-- Navigation Menu Wrapper DIV --> 

                  <ul class="nav navbar-nav navbar-right"><!-- Navigation Main UL -->

                      <li class="active"><a href="#">Home</a></li><!-- List / Menu Item -->
                      <li><a href="#">About Ribbit</a></li><!-- List / Menu Item -->
                      <li class="dropdown"><a data-toggle="dropdown" data-target="#">Treehouse<b class="caret"></b></a><!-- List / Menu Item / DropDown-->

                          <ul class="dropdown-menu"><!-- Drop Down Menu List -->

                              <li><a href="#">About Treehouse</a></li><!-- Drop Down List Item -->
                              <li><a href="#">Video Library</a></li><!-- Drop Down List Item -->
                              <li><a href="#">Learning Adventures</a></li><!-- Drop Down List Item -->
                              <li class="divider"></li><!-- List Item with CLass Used as Divider Line -->
                              <li><a href="#">Plans and Pricing</a></li><!-- Drop Down List Item -->

                          </ul><!-- END** Drop Down Menu List -->

                      </li><!-- END** List / Menu Item / DropDown--> 

                  </ul><!-- END** Navigation Main UL --> 

              </div><!-- END** Navigation Menu Wrapper DIV -->  

          </div><!-- END** NavBar Container-->   

      </div><!-- END** NavBar -->

Thanks in advance for any help!!

Craig

Dom Smith
Dom Smith
3,091 Points

would you be able to upload the code to http://jsfiddle.net/?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You're missing the navbar-header div. Should be the 3rd div in the bootstrap markup

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">