Centered Logo in Navigation Bar?

Question

can anybody guide me to the best way to create a navigation bar with a centered logo and 2 links in each side just like this:

Ive read about different ways like splitting a ul into 2 and floating one left and the other right and then centering the logo but im not sure how to do that and the more I read the more I got confused. I am looking for it to be responsive and for it to be taller than normal, maybe 15/20% of the screen height.

Can anybody help me on how to go about this?

Answer 1

Simply use Flexbox. Just replace the div #logo with your image.

HTML

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

CSS

html, body{
  height: 100%;
}

body{
  margin: 0;
}

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

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
nav {
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}
#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

Answer 2

Accepted answer breaks if the links aren't EXACTLY the same size (not likely in the real world, obviously could set a fixed width but fiddly)

If there are the same number of links on either side, this works (as long as there is enough room either side for the links to have an even width)

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

<nav class="navi">
    <ul class="navi-list">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</nav>

If an uneven number, you can add empty invisible elements (yuk I know but it works) either in the DOM or with :before / :after, depending on how many extra elements are needed. This solution is unfortunately not perfect so any suggested improvements would be great. Like this:

ul, li {
  list-style-type: none;
}

.navi-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navi-list li:not(.centered-logo) {
  flex: 1 0 auto;
  text-align: center;
}

.navi-list:before {
  content: "0";
  opacity: 0.1;
  display: block;
  flex: 1 0 auto;

  
  /*  dev view  */
  height: 20px;
  background: rgba(0,0,0,0.1);
}

.logo {
   background: grey;
   color: white;
   padding: 10px;
}

<nav class="navi">
    <ul class="navi-list">
<!--         <li style="opacity:0.1;">empty</li> -->
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li class="centered-logo">
          <a href="/">
             <div class="logo">LOGO</div>
          </a>
        </li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</nav>