Two part navigation. One centered and the other right aligned - html

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">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</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?

Answer 1

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>

Answer 2

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>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>