Just starting to explore Flexbox and having a tough time working with a Navbar. My goal is to have the site title on the far left and the buttons on the far right.
I've experimented with different flexbox combinations, but I just can't seem to get it right. This is my latest attempt at the code, and it should work this way, but something seems to be missing.
Within the Bootstrap Navbar declaration, I have included a flex container. Using space-between is supposed to align items to the left and right. I even added flex-grow: 1 to make it stretch across the viewport width, but it's not functioning as expected.
.nav__container {
display: flex;
justify-content: space-between;
&__title {
flex-grow: 1;
}
&__buttons {
flex-grow: 1;
}
}
<nav class="navbar navbar-expand-md navbar-dark bg-primary navbar-static-top py-0 ">
<div class="nav__container">
<div class="nav__title">
<a class="navbar-brand" href="@Url.Action("Index","Home")">Job Transfers</a>
</div>
<div class="nav__buttons">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 ml-auto">
<li class="nav-item">
<a class="nav-link" href="@Url.Action("Index","Home")">My Transfer Requests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("ViewTransferList","Transfer")">View Transfer Lists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("BidRequests","Bid")">My Bid Requests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="@Url.Action("BidList","Bid")">Bid Postings</a>
</li>
@if ((bool)Session["IsAdmin"])
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="@Url.Action("ViewBidList","Bid")">Employee Bids</a>
<a class="dropdown-item" href="@Url.Action("ViewRequestHistory","Transfer")">Request History</a>
<a class="dropdown-item" href="@Url.Action("ViewRecallRights","Transfer")">Recall Rights</a>
</div>
</li>
}
</ul>
</div>
</div>
</div>
</nav>
This is what I'm experiencing.