Struggling to create a Navbar using bootstrap right now. The issue I'm facing is with centering the nav-links on both sides of the nav-brand.
Here's my HTML code:
<nav class="navbar navbar-expand-sm navbar-light ">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">True Space</a>
<div class="collapse navbar-collapse nav-item-center" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item right-to-brand">
<a href="#" class="nav-link">Captin Recruitment</a>
</li>
<li class="nav-item left-to-brand">
<a href="#" class="nav-link">Parts</a>
</li>
</ul>
</div>
</nav>
CSS code:
.navbar {
background-color: rgba(172, 238, 255, 0.103);
}
.navbar-brand {
position: relative;
width: 100%;
left: 0;
text-align: center;
}
.navbar-nav .right-to-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
padding-right: 300px;
}
.navbar-nav .left-to-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
padding-left: 200px;
}
As you can see in this screenshot navbar problem, all the items are not aligned properly in one line. I've tried using display: inline-block; but it didn't yield the desired result.
I'm new to this and would greatly appreciate any help or guidance. Thank you!