I hope this will help you
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"><a href="#">Left 1</a></li>
<li class="navbar-left"><a href="#">Left 2</a></li>
<li class="active"><a href="#" class="nav-link">Products</a></li>
<li class=""><a href="#" class="nav-link">My Products</a></li>
<li><img src="your_img_path" alt="logo" style="width:70px; height:50px;"></li>
<li class=""><a href="#" class="nav-link">About KLion</a></li>
<li class=""><a href="#" class="nav-link">News & Updates</a></li>
<li class="navbar-right"><button type="button" class="btn">
<img src="../../assets/Group 1.png" alt="logo" style="width:80px; height:20px; ">
</button></li>
<li class="navbar-right" style="margin-right: 20px;"><button type="button" class="btn">
<img src="../../assets/[email protected]" alt="logo" style="width:20px; height:20px;">
</button></li>
</ul>
</div>
</nav>
@media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Thanks
.navbar{
display:flex;
flex-direction:row;
justify-content:space-evenly;
width:100%;
}
.navbar ul:first-child{
margin-left:20%;
display:flex;
flex-direction:row;
justify-content:space-between;
width:60%;
}
.navbar ul:last-child{
width:20%;
display:flex;
flex-direction:row;
justify-content:space-evenly;
}
https://codepen.io/infasyskey/pen/jOEojEQ
You can try this, if you are expecting something similar and position it in the appropriate tag inside the style block using margin and adjust the button size using padding.
<html>
<head></head>
<style>
.navbar-nav > a{
margin-left: 50px;
}
img{
margin-left: 50px;
}
</style>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-3">
<div class=" col-sm-10 navbar-nav justify-content-center">
<a href="#" class="nav-link">Products</a></li>
<a href="#" class="nav-link">My Products</a></li>
<img src="../../assets/KLion.jpg" alt="logo" style="width:70px; height:50px;"></li>
<a href="#" class="nav-link">About KLion</a></li>
<a href="#" class="nav-link">News & Updates</a></li>
<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/[email protected]" alt="logo" style="width:20px; height:20px;">
</button>
</div>
</nav>
</body>
</html>
I am Struggling to position the logo in the middle of navbar , and having elements spreading out from the logo on the left and right. I also want to push the buttons in the end of the nav bar.
this is the ideal positioning
In my code, i tried to create two column inside the nav bar. with one taking up 80% width which stores 5 elements, and the other taking up 20% width for the buttons at the end. I am not sure which is the best way to do 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/[email protected]" alt="logo" style="width:20px; height:20px;">
</button>
</ul>
</nav>
.navbar-nav > li{
margin-left: 130px;
}
