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

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

navbar/bootsrap

Hello!

1) If you run this code and narrow the viewport, you will see the that the 3 lis dont align horizontaly below the link that says Ribit. Can you please tell me how I can get the lis to align below the link with the text Ribbit.

2) What is the difference between these 2 rules?

 <script src="js/bootstrap.min.js"></script>

and 

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

thanks!!

<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">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->



</head>
<body>
    <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><a href="#">Home</a></li>
                        <li><a href="#">About Ribbit</a></li>
                        <li><a href="#">Treehouse</a></li>
                </ul>       
            </div>
        </div>  
    </div>




        <div class="jumbotron">
            <h1>Self-destructing message app</h1>
            <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
            <p class="btn-group">
              <a class="btn btn-success btn-lg" href="#">Download the app</a>
              <a class="btn btn-default btn-lg hidden-xs" href="#" >Text me the link</a>
            </p> 
        </div>
        <div class="row">
            <div class="col-sm-4">
              <h2>Delete photo &amp; video based on a timer</h2>
              <p>Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."</p>
            </div>
            <div class="col-sm-4">
              <h2>Build an easily managed friends list</h2>
              <p>Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store.</p>
            </div>
            <div class="col-sm-4">
              <h2>Store &amp; retrieve data using cloud servers</h2>
              <p>We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p>
            </div>
        <div>
        <hr>

        <div class="row">
            <div class="col-sm-6 hidden-xs">
               <h3>Learn how to make this app</h3>
               <p>We will build on the concepts learned in previous iOS projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed.</p>
               <div class="row">
                    <div class="col-sm-6 col-md-push-6">
                      <img class="img-responsive" src="img/thumb.jpg">
                   </div>
                   <div class="col-sm-6 col-md-pull-6">
                    <p>Get access to these courses for only $24 a month!</p>
                    <a href="#">Visit Treehouse Now &raquo;</a>
                   </div>


              </div>


            </div>

            <div class="col-sm-6">
                <h3>About Treehouse</h3>
               <p>Treehouse provides an extensive library of step-by-step video courses and training exercises that will give you a wide range of in-demand technology skills that will help you land your next dream job.</p>
               <a href="#">Sign up for Treehouse &raquo;</a>

            </div>




        </div>
            <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p>
       </div>

</div>
 <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

5 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi,

To answer #2 first, the css and js files represent the layout and behavior of elements when Bootstrap classes are applied. They form the Bootstrap framework.

The answer to #1 is a bit harder, but the short version is to wrap the button and navbar-brand inside a div with a navbar-header class, like this:

<div class="navbar-header"> 
    <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>

The longer answer has to do with understanding what styles are being applied when Bootstrap classes are added to elements. The navbar-brand is applying a left float to its element. This means the ul element will flow around (in this case, to the right) of the element floated left (navbar-brand). In order to fix this, it needs to clear the float. The way Bootstrap solves this is by wrapping the button and link in a navbar-header.

Opening up the source code, here are the relevant styles being applied by navbar-header:

.navbar-header:before,
.navbar-header:after {
  display: table;
  content: " ";
}
.navbar-header:after {
  clear: both
}
@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

This is the bit of magic that allows elements which follow a navbar-header to clear the floats - without having to explicitly clear them yourself. Also, that media query means that as the screen width drops below 768px, the navbar-header will no longer float left, becoming a block (divs, by default, are displayed as block elements) taking up the max width of its parent container, forcing the next block element to stack beneath it.

Here are the official docs on this topic.

I hope this was helpful!

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Alright, I'm at the point in this course relevant to your code. I don't know why Guil's code works for the dropdown. In fact, it shouldn't work, but that's beside the point I suppose. We should be using a navbar-header class in a div wrapping the toggle button and navbar-brand link - this is exactly how Bootstrap handles it.

Using your code, here is a proper fix to make it work:

<div class="navbar-header">
  <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>

Also, there are minor differences between using the project's file boostrap.min.css (version 3.0) over using the current version (3.2.0) - but, this still doesn't account for the dropdown menu problem we're having. For instance, I liked that in 3.0, adding class="lead" would reduce text size at small screen sizes, but 3.2.0 does not do this.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Robert,

Thanks for the thorough explanation. I now understand that the link with a class navbar-brand is floated left causing the ul to float right, but I tried to apply a clear fix on the container div and it didnt work.

FYI, can we work with the code below. I am following Framework Basics class, so I would like to know how to solve that code.

Cheers!!!

<!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">
    <style>
        /* Layout
================================= */

body {
    padding-top: 70px;
}
.container {
    max-width: 1000px;
}


/* Jumbotron
================================= */

.jumbotron {
    text-align: center;
}

.group::after{
content:"";
display:table;
clear:both;

}

    </style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- Navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container group">

       <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><a href="#">Treehouse</a></li>
          </ul>

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

    <div class="container">      
      <div class="jumbotron">
        <h1>Self-destructing message app</h1>
        <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
        <p class="btn-group">
          <a class="btn btn-success btn-lg" href="#">Download the app</a>
          <a class="btn btn-default btn-lg" href="#" >Text me the link</a>
        </p>
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h2>Delete photo &amp; video based on a timer</h2>
          <p>Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."</p>
        </div>
        <div class="col-sm-4">
          <h2>Build an easily managed friends list</h2>
          <p>Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store.</p>
       </div>
        <div class="col-sm-4">
          <h2>Store &amp; retrieve data using cloud servers</h2>
          <p>We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p>
        </div>
      </div>
      <hr>
      <div class="row">
        <div class="col-sm-6 hidden-xs">
          <h3>Learn how to make this app</h3>
          <p>We will build on the concepts learned in previous iOS projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed.</p>
          <div class="row">
            <div class="col-sm-6">
              <img class="img-responsive" src="img/thumb.jpg">
            </div>
            <div class="col-sm-6">
              <p>Get access to these courses for only $24 a month!</p>
              <p><a href="#">Visit Treehouse Now &raquo;</a></p>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <h3>About Treehouse</h3>
          <p>Treehouse provides an extensive library of step-by-step video courses and training exercises that will give you a wide range of in-demand technology skills that will help you land your next dream job.</p>
          <a href="#" class="btn btn-success btn-md">Sign up for Treehouse &raquo;</a>
        </div>
      </div>

      <hr>
      <div>
        <p>&copy; 2013 Ribbit - By Treehouse Island, Inc.</p>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I haven't been through that course, so it will take me some time to reach the point you're at to better understand your question. Is there a reason you can't use navbar-header? Trying to make your own hack that imitates a Bootstrap class, while continuing to use Bootstrap for everything else, is un-fun (though, highly educational).

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Robert,

Yes it works now, but I thought you said that the link is floated left due to the navbar brand style caussing the nav to float right, but I dont see a clearfix in your version. I apologize, but why does your code work (please explain in the simplest way?

Thank you so much for your help!

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

The nav is not floated - it is displayed as a block level element, so it flows around floated elements. This is why the nav appears to the right of the link.

The nav needs to clear the float to drop beneath the link. This is what navbar-header effectively does. I spent some time trying to reproduce the functionality of navbar-header without using navbar-header, and while I came close, it wasn't exactly correct. The visible border separating the navigation bar from the dropdown menu (at small screen sizes) was not extending fully to the right - off by 20 or 30px or so.

If you're really motivated to understand how to re-create what navbar-header is doing, you already have enough information to have a go at it on your own. Open up the source code, search for navbar-header and find what styles are being applied.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thanks Robert! I totally got it!

Micheal Emerson
Micheal Emerson
8,207 Points
Micheal Emerson
Micheal Emerson
8,207 Points

Thanks Robert Richey I looked everywhere for this answer! Also thanks to orange sky for asking the question!!