Am I able to position a logo in the centre of a nav bar using flexbox?

Question

I am trying to center a logo so that it is constantly in the center of my navigation bar, regardless of how many navigation links there are.

This would be easy enough for me if the items at the sides were both even, for example 2 links on the left and 2 on the right, but I'm trying to get 3 on the left and 2 on the right with the centered logo.

Screenshot: What I'm trying to achieve

Screenshot: What I currently have using flexbox

Is it possible to center the image using flexbox properties or would I have to go about it a different way, like involving absolute/relative positioning?

header.main-header {
  background: url("../images/slides/slide-1.jpg") no-repeat 75%/cover;
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
}

ul.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;
}

ul.container li {
  list-style-type: none;
}

li.logo img {
  max-width: 125px;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
      <li class="logo"><img src="http://placeimg.com/640/480/any" alt="Wines"></li>
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>

Thank you in advance. Have a great day. :)

As I mentioned when you posted this before..flexbox can't do this natively with the structure you have - https://stackoverflow.com/questions/38948102/center-and-right-align-flexbox-elements — Paulie_D, Jul 25 '18 at 09:46
How can it be done without flexbox? Just by using absolute and relative positioning and some media queries? I did try that but I must have messed up somewhere as it didnt really accomplish the look of that original image. Would bootstrap be the best option? — Karl, Jul 25 '18 at 09:56

Temani Afif · Accepted Answer · 2018-07-25T10:00:41.260

An idea is to use the logo as background and centred then you rely on some margin to adjust the menu elements:

header.main-header {
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
}

ul.container {
  display: flex;
  align-items: center;
  padding: 0;
  background:url(http://placeimg.com/640/480/any) center/contain no-repeat;
  min-height:100px;
}

ul.container li {
  list-style-type: none;
  margin:0 2%;
}
ul.container li:nth-child(3) {
  margin-right:auto;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>

But in case you can adjust your HTML you may simply split the menu into 2 parts:

header.main-header {
  height: 100vh;
}

nav.nav-bar {
  background-color: tomato;
  display:flex;
  align-items:center;
}

ul.container {
  display: flex;
  align-items: center;
  justify-content:space-around;
  flex:1;
  padding: 0;
}
img {
  max-width:100px;
}
ul.container li {
  list-style-type: none;
  margin:0 2%;
}

<header class="main-header">
  <nav class="nav-bar">
    <ul class="container">
      <li>My Story</li>
      <li>Wines</li>
      <li>How to Order</li>
    </ul>
     <img src="http://placeimg.com/640/480/any" >
    <ul class="container">
      <li>Personal Sommelier</li>
      <li>Contact</li>
    </ul>
  </nav>
  <p style="text-align: center;">|<br>(Center)</p>
</header>

I like the thinking, I never though about it that way but yeah :-D — Karl, Jul 25 '18 at 09:58

Am I able to position a logo in the centre of a nav bar using flexbox?

1 Answers1