自定义菜单，包含浮动文本和不对称边

Question

I'd like to make a menu for my website that looks like this image.

I want essentially three sections of the menu: a centered logo, a left side of menu items, and a right side of menu items. The dotted boxes denote those sections.

On the left section, I need two rows of menu items, that have even spacing dependent on the size of the box (spacing denoted by red lines). The spacing is also the same on the right section.

If someone could point me in the right direction or provide html/css, it would be very appreciated!

Answer 1

A better solution using only flexbox:

https://codepen.io/seanstopnik/pen/b5a8294dae7969c4c9fa7cfca470626c

HTML:

<header class="global-header" role="banner">
  <nav class="global-nav" role="navigation">
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 1</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 2</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 3</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 4</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Service 5</a></li>
    </ul>
    <a class="global-nav__logo" href="/"></a>
    <ul class="list global-nav__list">
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">About</a></li>
      <li class="list__item global-nav__list-item"><a class="global-nav__link" href="">Contact</a></li>
    </ul>
  </nav>
</header>

CSS:

.global-header {
  background-color: #fff;
  padding: 10px;
}

.global-nav {
  display: flex;
  justify-content: space-around;
}

.global-nav__list {
  display: flex;
  width: 100%;
  height: 70px;
  flex-wrap: wrap;
  align-items: center;
}
.global-nav__list .global-nav__list-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.global-nav__list .global-nav__list-item:nth-child(1), .global-nav__list .global-nav__list-item:nth-child(2) {
  flex: 0 0 50%;
}
.global-nav__list .global-nav__list-item:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: red;
  content: '';
}

.global-nav__link {
  position: relative;
  display: inline-block;
  color: #3cc7e3;
  background-color: #fff;
  padding: 0 6px;
  z-index: 1;
}
.global-nav__link:hover {
  color: #222;
}

.global-nav__logo {
  flex: 0 0 200px;
  border-radius: 50%;
  background-color: blue;
  margin: 0 10px;
}