Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Andrea Monty
Andrea Monty
2,724 Points

Navbar covering Jumbotron

My navbar is covering my jumbotron when i get down to a smaller screen, (990px and smaller). I am using Bootstrap Alpha 6, so what is shown in the video I could not use and had to piece this together in my HTML.

 <!-- Navbar   -->

  <nav class="navbar  fixed-top  navbar-inverse bg-primary">
<!--
  <button class="navbar-toggler navbar-toggler-right" 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="container">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#speakers">Speakers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#schedule">Schedule</a>
      </li>
    </ul>
   </div>
        <a class="navbar-brand float-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>

  </nav>
    <!-- End Navbar   -->


    <!--  Jumbotron  -->
   <div class="jumbotron jumbotron-fluid bg-info">
      <div class="container text-center pt-3">
        <h1 class="display-2">Full Stack Conf</h1>
        <p class="lead">A One-day Conference About All Things           JavaScript</p>

        <div class="btn-group mt-2" role="group" aria-label="Basic example">
          <button type="button" class="btn btn-primary btn-lg">Register Now</button>
          <a class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
</div>
     </div>
   </div>
    <!-- End Jumbotron  -->

    ```
Mike Hickman
Mike Hickman
19,817 Points

No problem! Just wish I could have helped out more in this situation. I just haven't used the newer bootstrap yet, so I am out of my element. One of THE hardest things while learning is getting to know all the proper lingo. Once you become more familiar with terms, it makes searching on google and stackoverflow so much simpler. That just comes with time. Keep plugging away and don't be afraid to ask questions.

One thing that will definitely help when asking questions (which you've already done), is to make sure you give a context to what you're trying to do, what you've tried already and where you're hitting a snag. Showing your code like you did above is always a huge plus.

Eventually, you'll want to start a github account. You can then go to gist.github.com, plug in any and all of your files/code and then link to that one gist. It works great if you have multiple files to show people when you don't know where you're stuck.

Have fun!

2 Answers

Mike Hickman
Mike Hickman
19,817 Points

Hi Andrea,

This is a common thing with Bootstrap. I haven't used Alpha 6, but try adding some margin to the top of your body in your css code. Increase as needed.

body {
  margin-top: 50px;
}

http://getbootstrap.com/components/#navbar-fixed-top

Andrea Monty
Andrea Monty
2,724 Points

hi Mike This is here I am confused. Guil did it using just bootstrap framkework, no css is written outside of the HTML file using Bootstrap. Do I need to make a css file for this or should it work using pure Bootstrap for a basic Bootstrap layout? Thanks!

Andrea Monty
Andrea Monty
2,724 Points

I went back and added this to it and now it works!

     <nav class="navbar  navbar-toggleable-md   navbar-inverse bg-primary">
Mike Hickman
Mike Hickman
19,817 Points

Your navbar-brand link is outside of the main container div. Try moving it up one line under the </ul> tag, and before the </div> tag.

Also, I noticed in his video for this that he uses 'p-t-3' on the jumbotron, and you have 'pt-3'.

Other than that, I've been screwing around with the bootstrap4 nav and I can't even get their "float-right" to work for the nav-brand. Wish I could keep playing, but I have to work on some projects. Hope someone with more v4alpha knowledge can help!

Good luck

Andrea Monty
Andrea Monty
2,724 Points

Thank you Mike for all your help!!! I can't tell you how much I appreciate it. You are the first who was nice and understanding to someone new. It is hard to figure out how to ask questions when first starting out and I have asked a couple questions in the past here in Treehouse and other places and even though stating I am new at all this people kind of disregard that and get kind of "testy". Because of that I have become scared to ask questions. You have helped me in more ways than you think. Again thank you for all your time and help!!

Santiago Herrero
Santiago Herrero
21,105 Points

alpha 6 uses pt-3 instead of p-t-3

Darrell Osborne
Darrell Osborne
23,085 Points

Hi Mike, you may have already figured this out by now, but the navbar component is now built using flex-box so you need to add the class "ml-auto" to the nav-brand to push it to the right. Just in case someone else needs this