-1

I am building the top navigation of a page. To the left, I have a logo and directly beside it I have my primary navigation links. I have two buttons that I want to position all the way to the right of the page, but I can't figure out how to get them over there. When I am able to get the buttons to move at all, it's only about halfway through the page...which isn't correct.

The buttons should be all the way to the right, like on https://webflow.com/

Notes: I used flex center to vertically center my navigation items.

body {
  font-family: 'Poppins', sans-serif;
}
.wrap {
  margin: 0 auto;
  width: 90%;
}
nav {
  display: flex;
  align-items: center;
  height: 80px;
  width: 1000px;
}
nav ul li {
  display: inline;
  list-style: none;
  padding: 0 24px 0 24px;
}
nav a {
  color: #353D49;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
nav a:hover {
  color: #247BFA;
}
<div class="wrap">
    <nav>
      <img src="img/logo.svg" />
      <ul class="navItems">
          <li><a href="#">Overview</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Learn</a></li>
      </ul>
      <div class="actionButtons">
        <button class="primary">Request a demo</button>
      </div><!--actionButtons-->
    </nav>
  </div><!--wrap-->
John Jackson
  • 11
  • 3
  • The button looks like its on the right side of the page to me when running your code. Can you add some more information detailing exactly how the current outcome differs from your desired outcome? Adding a 1px red border somewhere for reference may help. – TylerH Jan 10 '20 at 15:19
  • I want it to be all the way to the right side of the page. Currently, it just hangs out at the end of the list. Imagine the logo/nav links and the button layout of https://webflow.com/ – John Jackson Jan 10 '20 at 15:21

3 Answers3

0

You can position the element to the right of the flex parent using margin-left: auto. You can do the same for vertical positioning with margin-top: auto.

body {
  font-family: 'Poppins', sans-serif;
}
.wrap {
  margin: 0 auto;
  width: 90%;
}
nav {
  display: flex;
  align-items: center;
  height: 80px;
  width: 1000px;
}
nav ul li {
  display: inline;
  list-style: none;
  padding: 0 24px 0 24px;
}
nav a {
  color: #353D49;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
nav a:hover {
  color: #247BFA;
}

nav .actionButtons {
  margin-left: auto;
}
<div class="wrap">
    <nav>
      <img src="img/logo.svg" />
      <ul class="navItems">
          <li><a href="#">Overview</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Learn</a></li>
      </ul>
      <div class="actionButtons">
        <button class="primary">Request a demo</button>
      </div><!--actionButtons-->
    </nav>
  </div><!--wrap-->
Amar Syla
  • 3,523
  • 3
  • 29
  • 69
0

.actionButtons {margin-left: auto}

or

nav {justify-content: space-between}

cheers :)

Alek Angelov
  • 111
  • 6
0

Great case for margin-left: auto; though I would create a separate class. The goal is to make code reusable, so nesting it in your nav tag will make it unwieldy if you continue with this method throughout your project.

I created a separate class for .align-right and you can reuse this in other areas of your project , rather than being limited to .nav or applying it to all of your .actionButtons

body {
  font-family: 'Poppins', sans-serif;
}
.wrap {
  margin: 0 auto;
  width: 90%;
}
nav {
  display: flex;
  align-items: center;
  height: 80px;
  width: 1000px;
}
nav ul li {
  display: inline;
  list-style: none;
  padding: 0 24px 0 24px;
}
nav a {
  color: #353D49;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
nav a:hover {
  color: #247BFA;
}
.align-right {
  margin-left: auto;
}

<div class="wrap">
    <nav>
      <img src="img/logo.svg" />
      <ul class="navItems">
          <li><a href="#">Overview</a></li>
          <li><a href="#">Features</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Learn</a></li>
      </ul>
      <div class="actionButtons align-right">
        <button class="primary">Request a demo</button>
      </div><!--actionButtons-->
    </nav>
  </div><!--wrap-->
Sage
  • 33
  • 4