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 Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

Dongyun Cho
Dongyun Cho
2,256 Points
Posted by Dongyun Cho
Dongyun Cho
2,256 Points

why my nav goes vertically? and navbar-brand does not go apart!

    <!--navbar-->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <ul class="navbar-nav mr-auto">
        <li><a class="nav-link active" href="#">Home</a></li>
        <li><a class="nav-link" href="#">Link</a></li>
        <li><a class="nav-link" href="#">Link</a></li>
        <li><a class="nav-link disabled" href="#">Disabled</a></li>
      </ul>
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>
    <!--/navbar-->

nav in my code is vertical, not like in video. And for navbar-brand, why do I have to write for a, a class="navbar-brand pull-right" and mr-0 ? for what does it work eventhough I put "mr-auto"??

and the last question, why can't I use numbers for margin which is over 5? like mt-6 or 7,

2 Answers

Derek Neuts
Derek Neuts
26,812 Points 
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
    <div class="container" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <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>
        <a class="navbar-brand hidden-xs-down" href="http://www.teamtreehouse.com" target="_blank">Presented by
            Treehouse</a>
    </div>
</nav>

First, try wrapping the navbar in a DIV, as shown above. Also, what happened to your LI classes? You may also want to check for unclosed tags, as that can throw your whole page off. I hope this helps!

Chelsea Rucker
seal-mask
.a{fill-rule:evenodd;}techdegree
Chelsea Rucker
Full Stack JavaScript Techdegree Student 14,613 Points
Chelsea Rucker
.a{fill-rule:evenodd;}techdegree
Chelsea Rucker
Full Stack JavaScript Techdegree Student 14,613 Points

I added the .justify-content-end class to my anchor tag:

<a class="navbar-brand justify-content-end" href="http://www.teamtreehouse.com">Presented by Treehouse</a>

Then moved it to the bottom of my code, under the closing </ul> tag:

 <nav class="navbar fixed-top navbar-toggleable-md 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="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <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>
      <a class="navbar-brand justify-content-end" href="http://www.teamtreehouse.com">Presented by Treehouse</a> 
    </div>
  </nav>