Positioning of elements inside the Navigation bar

Question

I'm having an issue with the position of an element inside the navigation menu:

<header class="main-header">
  <a href="" class="logo"><img src="https://www.paypalobjects.com/webstatic/i/logo/rebrand/ppcom.svg" alt="Paypal logo" /></a>
  <nav class="main-nav">
    <ul>
      <li><a href="">Buy</a></li>   
      <li><a href="">Sell</a></li> 
      <li><a href="">Send</a></li> 
      <li><a href="">Business</a></li> 
    </ul>
  </nav>
  <div class="button">
    <a href="#" class="">Log in</a>
    <a href="#">Sign up</a>
  </div>
</header>

The div.button is the element that I'm having an issue with. I used flex to position the elements inside the header. But I have a problem with the position of the div.button, I can't position it to the right. I inserted a padding to the left to move it but it's just a bad workaround.

You can check my work in CodePen: http://codepen.io/marcvs/pen/JRmQjx

I'm a newbie when it comes to Web development.

score 2 · Accepted Answer · edited May 23 '17 at 12:06

2

There's no real justify-child option, but you can use the margin-left: auto; trick:

.button {
  display: flex;
  margin-left: auto;
}

Also, related: How to justify a single flexbox item (override justify-content)

edited May 23 '17 at 12:06

Community

1
1

answered Oct 19 '16 at 09:06

roberrrt-s

7,914
2
46
57

score 0 · Answer 2 · answered Oct 19 '16 at 09:09

0

Try this,

.button {
  display: flex;
  position: absolute;
  right: 0px;
}

answered Oct 19 '16 at 09:09

Lahiru Ashan

767
9
16

score 0 · Answer 3 · answered Oct 19 '16 at 09:21

try this.
flex display is a flexible layout.
By giving the right value as a percentage, it is also responsive to the application.

.button {
  display:flex;
  position:absolute;
  right:3%;
}

<div class="button">
     <a href="#" class="">Log in</a>
     <a href="#">Sign up</a>
</div>

Positioning of elements inside the Navigation bar

3 Answers3