Как можно расположить логотип в навигационной панели, с неравным количеством пунктов меню на каждой стороне?

Question

Я кодирую дизайн, который нашел для практики, и пытаюсь разместить логотип в центре навигационной панели, как в дриблинге.

https://dribbble.com/shots/4424634-MIFESTIVAL-Home-Page/attachments/1005722

Слева четыре элемента, а справа только два.Изначально я держал их влево и не мог понять, поэтому попробовал flexbox, потому что нашел этот совет: https://stackoverflow.com/a/21862333/7723283

Это работает, только если у меня есть четное количество элементов в навигации.Мне также интересно, если я в порядке, все эти элементы, как обычная навигация, вместо кнопок или что-то еще.Этот CSS в основном такой же, как ссылка выше, поэтому все мои элементы навигации расположены одинаково.Но мне нужен логотип в центре.Я чувствую, что с flexbox можно легко что-то сделать, но я впервые использую это.

nav{
  display:flex;
  width:100%;
  height:20%;
  background:#eee;
  align-items:center;
  justify-content:center;
}

nav a {
  text-decoration:none;
  color:black;
  margin: 0 30px;
}

#logo{
  width: 200px;
  height:100%;
  background:rgb(126, 232, 163);
}

<nav>
   <a href="#">Menu icon</a></li>
   <a href="#">Search icon</a></li>
   <a href="plan.html">Plan Your Trip</a></li>
   <a href="experience.html">Experience</a></li>
   <a href="index.html" id="logo">mifestival</a></li>
   <a href="tickets.html">Tickets</a></li>
   <a href="line-up.html">Line-Up</a></li>
</nav>

Answer 1

Вот довольно простая реструктуризация, с которой можно начать:

Мы разберем кусочки вашего меню на три отдельные части (левая сторона, середина / логотип, правая сторона)

<nav>
    <div class="leftSide">
        <a href="#">Menu icon</a>
        <a href="#">Search icon</a>
        <a href="plan.html">Plan Your Trip</a>
        <a href="experience.html">Experience</a>
    </div>
    <div class="logo">
        <a href="index.html" id="logo">mifestival</a>
    </div>
    <div class="rightSide">
        <a href="tickets.html">Tickets</a>
        <a href="line-up.html">Line-Up</a>
    </div>
</nav>

А для CSS мы добавим следующее:

.leftSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}
.rightSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}