I'm having trouble centering the logo in my navbar and getting elements to spread out from the logo on both sides. I also want to position the buttons at the end of the navigation bar.
Here's the desired layout In my code, I attempted to create two columns inside the navbar where one column occupies 80% width for storing 5 elements, and the other takes up 20% width for the buttons at the end. I'm unsure about the best approach to achieve this.
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<ul class=" col-sm-10 navbar-nav justify-content-center">
<li class="nav-item"><a href="#" class="nav-link">Products</a></li>
<li class="nav-item"><a href="#" class="nav-link">My Products</a></li>
<li><img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
<li class="nav-item"><a href="#" class="nav-link">About KLion</a></li>
<li class="nav-item"><a href="#" class="nav-link">News & Updates</a></li>
</ul>
<ul class=" col-sm-1 navbar-nav justify-content-between py-3 ">
<button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px;">
</button>
<button type="button" class="btn">
<img src="../../assets/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98ebf0f7e8e8f1f6ffb5fbf9eaecd8aae0b6e8f6ff">[email protected]</a>" alt="logo" style="width:20px; height:20px;">
</button>
</ul>
</nav>
.navbar-nav > li{
margin-left: 130px;
}