Two part navigation. One centered and the other right aligned

Question

I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.

I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:

You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.

Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.

HTML CODE

<nav class="navbar is-fixed-top">
  <a href="">Products</a>
  <a href="">Our Story</a>
  <div id="logo">Logo placeholder</div>
  <a href="">Blog</a>
  <a href="">Contact Us</a>
</nav>

CSS CODE

nav {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #194522;
  font-weight: bold;
  margin: 0 40px;
  display: flex;
  align-items: center;
}

nav a:hover {
  color: #abcf39;
}

How can I get my navigation like that?

Have a look at https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements — Gabriele Petrioli, Dec 28 '18 at 14:04

Daniel Sixl · Accepted Answer · 2018-12-28T14:34:10.663

Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:

.navbar-start--centered {
    flex-grow: 1;
    justify-content: center;
}

Here a codepen to play with.

Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.

.navbar-start--centered {
    flex-grow: 1;
    justify-content: center;
}

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div id="navbarBasicExample" class="navbar-menu">

    <div class="navbar-start navbar-start--centered">
      <a class="navbar-item" href="">Products</a>
      <a class="navbar-item" href="">Our Story</a>
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>
      <a class="navbar-item" href="">Blog</a>
      <a class="navbar-item" href="">Contact Us</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
                <span class="icon">
                  <i class="fas fa-shopping-cart"></i>
            </span>
            <span>Cart</span>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>

  </div>
</nav>

score 1 · Answer 2 · answered Dec 28 '18 at 14:13

You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.

Then use normal flex positioning to set the contents of the second (right) container to be right aligned.

nav {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
}

nav a {
  text-decoration: none;
  color: #194522;
  font-weight: bold;
  margin: 0 40px;
  display: flex;
  align-items: center;
}

nav a:hover {
  color: #abcf39;
}
.nav-container{
  display:flex;
  flex:1;
  justify-content: flex-end;
}
.nav-container a {
  margin:0 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />

<nav class="navbar is-fixed-top">
  <div class="nav-container"></div>
  <a href="">Products</a>
  <a href="">Our Story</a>
  <div id="logo">Logo placeholder</div>
  <a href="">Blog</a>
  <a href="">Contact Us</a>
  <div class="nav-container">
  <a href=""></a>
  <a href="">Login</a>
  </div>
</nav>

Two part navigation. One centered and the other right aligned

2 Answers2