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
Andrea Monty
2,724 PointsNavbar 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 -->
```
2 Answers
Mike Hickman
19,817 PointsHi 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;
}
Andrea Monty
2,724 Pointshi 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
2,724 PointsI went back and added this to it and now it works!
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
Mike Hickman
19,817 PointsYour 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
2,724 PointsThank 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
21,105 Pointsalpha 6 uses pt-3 instead of p-t-3
Darrell Osborne
23,146 PointsHi 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
Mike Hickman
19,817 PointsMike Hickman
19,817 PointsNo 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!