CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
Joseph
Joseph

Reputation: 2726

Bootstrap side menu collapse with navbar

I have a very simple page with a navbar at the top and nav down the left hand 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>

Currently the top navbar correctly collapses on mobile devices. I'm trying to get make it so that my nav down the left hand side of the page also collapses into the same menu on mobile devices. So when collapsed the menu would contain:

Dashboard
Users
Tasks
------
Help Guide
Company Name
Test User

I could simply duplicate the side links in the navbar and only show them on sm devices. However I was wondering if there was a better way to avoid having to duplicate the links?

I'm using Bootstrap 4 Alpha 6.

Upvotes: 1

Views: 2332

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362280

Another approach is to use the BS4 flexbox utility classes to change the order on small widths. Use a nav for both menus instead of the navbar. This method doesn't require extra CSS or duplicate links...

http://www.codeply.com/go/XS00CgPl7K

<div class="container">
    <div class="row">
        <div class="col-md-6 flex-first col-12">
            <a class="navbar-brand" href="#">Navbar</a>
        </div>
        <div class="col-md-6 col-3 d-flex flex-last flex-md-unordered">
            <div class="nav flex-md-row flex-column ml-md-auto" id="top-links">
                <a class="nav-item nav-link pl-0" href="#">Help Guide</a>
                <a class="nav-item nav-link pl-0" href="#">Company Name</a>
                <a class="nav-item nav-link pl-0" href="#">Test User</a>
            </div>
        </div>
        <div class="col-9 flex-md-last">
            Content here...
        </div>
        <div class="col-3 flex-first flex-md-unordered">
            <nav class="nav flex-column">
                <a class="nav-item nav-link pl-0" href="#">Dashboard</a>
                <a class="nav-item nav-link pl-0" href="#">Users</a>
                <a class="nav-item nav-link pl-0" href="#">Tasks</a>
            </nav>
        </div>
    </div>
</div>

Demo

Upvotes: 0

Michael Arrison
Michael Arrison

Reputation: 1553

Some fancy javascript would do the trick. But the far simpler solution is to accept the duplicate links. It will be far more maintainable.

Upvotes: 3

Related Questions