When I’m at col-sm
or col-xs
The toggle button shows up like it’s supposed to but if I click on it I can’t seem to get the nav-links
to line up properly any flex-box tricks I can try to make that happen?
I have my Codepen here.
if you reduce it to say the width of a I-Phone (4) then the menu items don’t line up correctly. I’d like to fix that.
The core of my code is here.
<nav class="navbar navbar-expand-md fixed-top">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse navbar-toggleable-sm pull-right" id="exCollapsingNavbar">
<ul id="top-nav" class="nav nav-pills pull-right">
<li class="nav-item active">
<a class="nav-link" href="/login"><i class="fas fa-users"></i> Members</a></li>
<li class="nav-item"><a class="nav-link" href="#tour"><i class="fas fa-store"></i> Features</a></li>
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fas fa-user"></i> About</a></li>
<li class="nav-item">
<a class="nav-link" href="#gallery"><i class="fas fa-camera"></i> Gallery</a></li>
<li class="nav-item">
<a class="nav-link" href="#videos"><i class="fas fa-video"></i> Videos</a></li>
<li class="nav-item">
<a class="nav-link" href="/cart/"><i class="fas fa-cart-plus"></i> Join</a>
</li>
</ul>
</div>
</div>
</nav>