My webpage layout is very basic, featuring a navbar at the top and a navigation menu down the left side of the page.
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#top-links" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mr-auto" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="top-links" style="width:auto;">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Help Guide</a>
<a class="nav-item nav-link" href="#">Company Name</a>
<a class="nav-item nav-link" href="#">Test User</a>
</div>
</div>
</nav>
<div class="row">
<div class="col-2">
<nav class="nav flex-column">
<a class="nav-link" href="#">Dashboard</a>
<a class="nav-link" href="#">Users</a>
<a class="nav-link" href="#">Tasks</a>
</nav>
</div>
<div class="col">
Content here...
</div>
</div>
</div>
The top navbar collapses correctly on mobile devices. I am now attempting to make the left-hand side navigation menu collapse into the same menu on mobile devices. The collapsed menu should include:
Dashboard
Users
Tasks
------
Help Guide
Company Name
Test User
I could simply duplicate the side links in the navbar and only show them on small devices. However, I was wondering if there is a more efficient way to avoid duplicating the links?
Bootstrap 4 Alpha 6 is being used for this project.