As I work on coding a design I found for practice, I am facing the challenge of getting the logo to be centered in the navbar, similar to the layout in the Dribble link below.
View Design on Dribble
The navigation bar has 4 items aligned on the left and only two on the right. Initially, I floated them all to the left but couldn't achieve the desired outcome. So, I decided to try flexbox after coming across this helpful tip on Stack Overflow: Link to Tip
While using flexbox did help position all my navigation items equally, it only works when there is an even number of items in the navbar. Furthermore, I'm contemplating whether it's acceptable to include all these items as normal navigation links rather than buttons. The CSS code I've implemented mirrors the one from the link above, ensuring equal positioning for all nav items, but I'm struggling with centering the logo. Although I believe flexbox offers a simple solution, this project marks my first time working with it.
nav{
display:flex;
width:100%;
height:20%;
background:#eee;
align-items:center;
justify-content:center;
}
nav a {
text-decoration:none;
color:black;
margin: 0 30px;
}
#logo{
width: 200px;
height:100%;
background:rgb(126, 232, 163);
}<nav>
<a href="#">Menu icon</a></li>
<a href="#">Search icon</a></li>
<a href="plan.html">Plan Your Trip</a></li>
<a href="experience.html">Experience</a></li>
<a href="index.html" id="logo">mifestival</a></li>
<a href="tickets.html">Tickets</a></li>
<a href="line-up.html">Line-Up</a></li>
</nav>