Image in the middle of navbar

Question

I want to put an image in center of my navbar on my page. Here's my result wanted (example):

How to make it working (without bootstrap).

For now my code looks like this:

<nav class="navigation">
            <ul class="navigation-list-1">
                <li class="navigation-list-item"><a href="#home">Home</a></li>
                <li class="navigation-list-item"><a href="#features">Features</a></li>
                <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
                <li class="navigation-list-item"><img class="logo" src="assets/LOGO.png"></li>
                <li class="navigation-list-item"><a href="#form">Form</a></li>
                <li class="navigation-list-item"><a href="#team">Team</a></li>
                <li class="navigation-list-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>

And styling:

.navigation-list-item {
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: bold;
padding: 15px;
border-top: 10px solid white;
margin-right: -5px;

}

.logo {
max-height: 5%;
max-width: 15px;
background: cornflowerblue;
border: 5px solid cornflowerblue;

}

But it looks terrible and doesn't work... Maybe it's better way to put two navbars (left and right) into the main navbar container?

Answer 1

Use Flexbox

But it will only work if you are having odd number of children and image must be in the center.

In order to make it responsive, you should use either % or vw(view width)

Check the example, where I have used vw, and also removed margin to stick it to the top.

FYI- The trigger is onclick, so Click on the image when it's loaded ;)

function big() {
  var w = 5;
  var foo = setInterval(function() {
    if (w > 15) clearInterval(foo)
    w = w + 1;
    document.getElementById('logo').style.width = w + 'vw';

  }, 100);
}

.logo {
  width: 2vw;
  background: cornflowerblue;
  border: 5px solid cornflowerblue;
}

.outer {
  display: flex;
}

.outer>p {
  flex: 1;
  height: 70px;
  line-height: 70px;
  background: blue;
}

.outer>p>a {
  text-decoration: none;
  color: white;
}

.outer>p .logo {
  flex: 1;
}

p {
  text-align: center;
  margin: 0px;
}

body {
  margin: 0px;
}

<nav class="navigation">
  <div class="outer">
    <p class="navigation-list-item"><a href="#home">Home</a></p>
    <p class="navigation-list-item"><a href="#features">Features</a></p>
    <p class="navigation-list-item"><a href="#add-info">Add info</a></p>

    <p class="navigation-list-item"><img class="logo" id="logo" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" onclick="big()"></p>
    <p class="navigation-list-item"><a href="#form">Form</a></p>
    <p class="navigation-list-item"><a href="#team">Team</a></p>
    <p class="navigation-list-item"><a href="#contact">Contact</a></p>
  </div>
</nav>

Example with Unordered List <ul>

Just added flex property to <ul>

.navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;
  
width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}

<nav class="navigation">
  <ul class="navigation-list-1">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
    <li class="navigation-list-item"><a href="#form">Form</a></li>
    <li class="navigation-list-item"><a href="#team">Team</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>