Align logo on the left and navigation links on the right using flexbox

Question

My question is about navigation bar styling and layout using flex.

I am attempting to create a fixed navigation bar where the logo/link to the home is left justified, with the rest of the links right justified. I have been trying to accomplish this with flex using the CSS styling of flex-direction:row and row-reverse, and justify-content: flex-start and flex-end with little success.

How can I achieve this look using flex?

.header {
  display: flex;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.fixednav {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 1);
}

.leftnav {
  position: absolute;
  flex-direction: row;
  justify-content: flex-start;
}

.rightnav {
  position: absolute;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

<div class="header">

  <header>

    <div class="navcontainer">
      <nav class="fixednav">
        <div class="leftnav"><a href="#">logo</a></div>
        <div class="rightnav"><a href="#" class="rightnav">home</a></div>
        <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
        <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
      </nav>
    </div>

  </header>

</div>

@BASEERHAIDER similar to that, but with the right a href links justified to the very right of the page. — ezramizrahi, Nov 20 '17 at 21:31

helb · Accepted Answer · 2017-11-21T07:30:43.693

The easiest way is probably to "stretch" the .leftnav so it pushes .rightnav to the right edge. The flex-grow rule does just that (i added borders so it's clear how it works):

.fixednav {
  display: flex;
  flex-direction: row;
  align-items: center; /* aligns links vertically */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 1);
}

.leftnav {
  flex-grow: 1; /* this is the important bit */
}

/* the rest is just for looks */

a {
  padding: 1em;
}

div {
  border: 1px dotted crimson;
}

<header>
  <nav class="fixednav">
    <div class="leftnav"><a href="#">logo</a></div>
    <div class="rightnav"><a href="#" class="rightnav">home</a></div>
    <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
    <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
  </nav>
</header>

You can simplify the HTML a bit, with the same result:

<header class="fixednav">
    <nav class="leftnav">
        <a href="#">logo</a>
    </nav>
    <nav class="rightnav">
        <a href="#" class="rightnav">home</a>
        <a href="#" class="rightnav">profile</a>
        <a href="#" class="rightnav">contact</a>
    </nav>
</header>

MDN article about flex-grow …
…and flex - shorthand for flex-grow, flex-shrink, and flex-basis

score 2 · Answer 2 · answered Nov 20 '17 at 21:27

Here's all you need:

.fixednav {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: lightgray;
}

a:first-child {
  margin-right: auto;
}

<header>
  <nav class="fixednav">
    <a href="#">logo</a>
    <a href="#">home</a>
    <a href="#">profile</a>
    <a href="#">contact</a>
  </nav>
</header>

Learn about flex auto margins here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Dhaval Jardosh · Answer 3 · 2017-11-20T21:34:20.773

Remove position:absolute; from all the child elements i.e leftnav and rightnav.

And to for logo to stay on right. Give it property of flex:6 or any larger number. It will push the other elements on the right side.

.fixednav {
  display: flex;
  flex-direction: row;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: blue;
}

.leftnav {
  line-height: 60px;
  flex: 10;
}

.leftnav>a {
  text-decoration: none;
  color: white;
  padding: 0px 10px;
}

.rightnav {
  line-height: 60px;
  padding: 0px 5px;
}

.rightnav>a {
  text-decoration: none;
  color: yellow;
}

<div class="header">

  <header>

    <div class="navcontainer">
      <nav class="fixednav">
        <div class="leftnav"><a href="#">logo</a></div>
        <div class="rightnav"><a href="#" class="rightnav">home</a></div>
        <div class="rightnav"><a href="#" class="rightnav">profile</a></div>
        <div class="rightnav"><a href="#" class="rightnav">contact</a></div>
      </nav>
    </div>

  </header>

</div>

score 0 · Answer 4 · answered Nov 20 '17 at 21:39

I have removed position: absolute and add Width in your .leftnav and .rightnav classes:

.header {
  display: flex;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.fixednav{
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 1);
}

.leftnav {
//  position: absolute;
  flex-direction: row;
  justify-content: flex-start;
  min-width: 100px;
  margin-left:5px;
}

.rightnav {
  //position: absolute;
  justify-content: flex-end;
  flex-direction: row-reverse;
  min-width: 100px;
}

Align logo on the left and navigation links on the right using flexbox

4 Answers4