Hello,
I've been working on upgrading to bootstrap 4, but I'm having some issues with the flex containers.
Specifically, I'm experiencing alignment problems with my navbar menu links, both submenu and mainmenu. Interestingly, when I remove the submenu ul content completely, the main menu aligns correctly to the right.
Any insights on what might be causing this issue?
Thank you in advance.
<nav class="header navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<div class="navbar-brand">
Logo
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
Menu
</button>
<div class="collapse navbar-collapse flex-column align-items-end" id="navbarMenu">
<div class="row">
<ul class="col-12 navbar-nav navbar-submenu ml-auto order-last">
<li class="nav-item">
<a class="nav-item nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#">Link</a>
</li>
</ul>
<ul class="col-12 navbar-nav ml-auto order-xs-first order-md-last">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-outline-secondary" href="#">button 1</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-danger text-white" href="#">button 2</a>
</li>
</ul>
</div>
</div>
</div>
</nav>