Logo in middle of nav bar without bootstrap - html

Question

I have a header that I would like to put a logo in the middle of. I don't want to use bootstrap unless there is no other choice. The logo appears to show in the centre of the navigation bar as I would like, however, the links do not go around it properly. Here is an example of what I want the navbar to look like in terms of positioning: ibb.co/zsGG9FY
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
float: left;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>

Answer 1

You have set float: left on <li> tag so it keeps on left position. This should be removed.
And using display: flex layout on ul tag, you can align all items on center.
Attached snippet shows what you need.
#firstpage {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
}
#firstpage ul {
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>

Answer 2

My solution uses Flexbox. I've replaced the image with an element with a dashed border so that it's obvious where it is. I've also but a pink background behind each link to show that they are indeed all the same width.
Each normal link has a width of 100% to force them to take up all available space. The logo has flex-shrink:0 so that it retains it's given size.
#firstpage ul {
list-style-type: none;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
}
#firstpage li {
width: 100%;
}
#firstpage li:nth-child(odd) {
background: pink;
}
#firstpage li a {
display: block;
text-align: center;
color: white;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo {
border: white dashed 3px;
width: 50px;
flex-shrink: 0;
height: 50px;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>

Answer 3

I've removed the classes containing float: left for li items and position: absolute for .midlogo item respectively.
All you need is flex property inside ul item to adjust its 1 dimensional layout.
#firstpage {
width: 100%;
height: 100%;
}
#firstpage ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
/************ ADD FLEX DISPLAY ************/
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
#firstpage li a {
display: block;
color: white;
text-align: center;
padding: 33px 19px;
text-decoration: none;
font-family: Futura;
font-size: 11px;
}
#firstpage li a:hover {
color: #00CFFF;
}
#firstpage .active {
color: #00CFFF;
}
#firstpage .midlogo img {
width: 100%;
height: 100%;
background-color: white;
}
<section id="firstpage">
<ul>
<li><a class="active" href="#firstpage">HOME</a></li>
<li>HOW IT WORKS</li>
<li>WHY CHOOSE US</li>
<li class="midlogo">
<img src="logo.png">
</li>
<li>GALLERY</li>
<li>SERVICES</li>
<li>CONTACT US</li>
</ul>
</section>
You should read about the flex property- https://developer.mozilla.org/en-US/docs/Web/CSS/flex