Central Logo navbar with links on either side [duplicate] - html

Question

This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 1 year ago.
Im trying to get my navbar to look like this:
But it looks like this:
I am using bootstrap 5. I basically want the navbar links on either side of the logo. Can I add some custom class in the html and then just translate them i tried this but couldnt get it to work. Here is the HTML and CSS for the navbar.
<nav class="navbar navbar-expand-md navbar-dark bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mb-02 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">GALLERY</a>
</li>
<!-- <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a> -->
<li class="nav-item">
<a class="nav-link navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUS</a>
</li>
<li class ="nav-item nav-item-left">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
/* NAVBAR */
.navbar {
border-bottom: solid #5f4b22;
}
.bg-custom{
background-color: #141619;
}
.navbar-brand {
flex: 0 1 auto;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 0;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%);
text-align: center;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border:3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}

Answer 1

Your just need to update your navbar-brand class as follows and add custom height for ul e.g ul {height:40px;}.And finally add position: inherit; for img. Your modified/updated css will be as follows;
.navbar-brand {
/* flex: 0 1 auto; */
/* display: block; */
width: 100px;
height: 100px;
/* position: absolute; */
/* left: 50%; */
top: 0;
margin: 0 !important;
padding: 0 !important;
/* transform: translateX(-50%); */
text-align: center;
}
ul {
height:40px;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border: 3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
position: inherit;
}
Related StackOverFlow post can also be helpful for you.