I'm working on creating a responsive navigation list with a centered image inside. I've almost got it, but the image appears higher up than the rest of the list.
My goal is to achieve this layout, but I'm having trouble figuring it out: https://i.sstatic.net/xWjxh.png Any assistance would be greatly appreciated!
CODE: https://jsfiddle.net/z50zgpLg/
HTML:
<div class="container-fluid">
<header>
<ul class="nav">
<li>Home</li>
<li>Portfolio</li>
<li id="logo">
<img src="images/sonis.png"/>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.container-fluid {
border: 1px solid red;
width: 100%;
}
.nav {
border: 1px solid black;
width: 60%;
margin:0 auto;
text-align: center;
}
.nav li {
display: inline-block;
border: 1px solid red;
}
#logo {
height: auto;
width: 100px;
}
#logo img {
width: 100px;
height: auto;
}