I am attempting to implement a responsive Bootstrap 4 navbar within Angular 8.
When the menu is closed, the element order is correct: COMPANY, BROWSE, LOGIN
The issue arises when I open the menu and the #menu receives the navbar-collapse flex attributes:
.navbar-collapse {
flex-basis: 100%;
flex-grow: 1;
align-items: center;
}
However, this causes #company to shift right due to flex-basis: 100%, pushing #login below the entire menu.
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" id="company">COMPANY</a>
<div class="collapse navbar-collapse" id="menu">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">BROWSE</a>
</div>
</div>
<div class="navbar-nav" id="login">
<a class="nav-item nav-link" href="#">LOGIN</a>
</div>
</nav>
I am facing challenges in ensuring that #menu does not impact #company and #login. My only solution was adjusting the elements' order using Bootstrap's order-* class, but this requires knowledge of the #menu toggle state.
How can I dynamically set the order based on the #menu toggle state? Alternatively, how can I prevent the elements from shifting?