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 Laurie Schock
Laurie Schock
12,129 Points

navbar alignment

I am trying to get logo to align to left and nav-links to right without luck with bootstrap. Any advice?

Carlos Lantigua
Carlos Lantigua
5,938 Points
Carlos Lantigua
Carlos Lantigua
5,938 Points

Please share your code using snap shot or something so that we can tell what you're doing.

Laurie Schock
Laurie Schock
12,129 Points 
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="containter">
        <a class="navbar-brand order-1" href="#">Furniture Anew!</a>
        <button class="navbar-toggler" 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">
            <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="#images">Images</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
      </div>
      </nav>
    <!-- /navbar -->

1 Answer

Carlos Lantigua
Carlos Lantigua
5,938 Points
Carlos Lantigua
Carlos Lantigua
5,938 Points

I was able to copy your code and create a little css with it, I find that too much nesting can make it hard to deal with when grabbing some classes for css so I tried to simplify it a bit in my snap shot. I start by deciding the width of the body, that will tell you where your outer limits for your entire page will be (I placed it to 100% just for this example). I then moved on to the li and placed the display:inline to make it appear in a line rather than up and down. Then the navbar width to 100% and overflow to hidden (this keeps the class from stretching past its outer limits). Then the brand class I added "text-align:Left" to move it left and did the opposite for the ul. There are probably better more responsive ways to do this but its how I came up on it, hope it helps. https://w.trhou.se/a2wvl7xean