将侧边栏链接添加到Bootstrap“汉堡”菜单

Question

I have a page made in Bootstrap that has both a top navbar and a sidebar. Currently, when you resize the page down to a smaller size (or view it on mobile/tablet), the sidebar disappears and the top bar's links go into the "hamburger" menu (the dropdown that is only shown at smaller screen sizes). I would like the sidebar's links to be added to the hamburger menu as well, but not to be displayed on the top bar when the screen is large.

Currently here is what I have for the top bar:

<nav class="navbar navbar-inverse navbar-fixed-top">
(some other stuff)
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="logout-link"><a href="logout url">Logout</a></li>
      </ul>
    </div>
</nav>

and here is what I have for the side bar (located within a 'row' div):

    <div class="col-sm-2 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li><a href="fizz">Fizz</a></li>
        <li><a href="buzz">Buzz</a></li>
        <li><a href="blah">Blah</a></li>
      </ul>
    </div>

When you resize the page down, the dropdown menu that appears in the top right looks like this:

logout

And I would like it to look like this:

Fizz
Buzz
Blah
======
logout

...without adding "Fizz Buzz Blah" to the top bar of the full-sized screen. How can I do this? I tried adding the "dropdown" and "nav-navbar" classes to the sidebar column but it didn't work.

Answer 1

Maybe this will help or give you some ideas.

You could do this by separating your nav links with navbar-left / navbar-right and then use navbar-left as your sidebar at widths over 768px. Then all your links will consolidate inside the mobile navigation under 767px.

Note: this setup is for a fullwidth layout (using the container-fluid class), if you're using the container class you'll have to make adjustments for those widths.

See working example Snippet at FullPage.

 body { padding-top: 50px; } @media screen and (min-width: 768px) { .sidebar-nav .navbar-nav.navbar-left { top: 50px; bottom: 0; left: 0; width: 150px; position: fixed; background: #222; } .sidebar-nav .navbar-nav.navbar-left > li { display: block; float: none; } .main-content { margin-left: 150px; } } /***FOR DEMO ONLY***/ .main-content .thumbnail { border: none; border-radius: 0; background: rgba(255, 255, 255, 0.75); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20); padding: 25px; max-width: 500px; margin: 12.5px auto; } /***FOR DEMO ONLY***/ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="wrapper"> <nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav"> <div class="container-fluid"> <div class="navbar-header"> <button data-toggle="collapse" data-target="#bs-nav" type="button" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="navbar-collapse collapse" id="bs-nav"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Fizz</a> </li> <li><a href="#">Buzz</a> </li> <li><a href="#">Blah</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Logout</a> </li> </ul> </div> </div> </nav> <div class="main-content"> <div class="container-fluid"> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6"> <div class="thumbnail"> <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> </div> </div> </div> </div> </div> </div> 

Answer 2

I found an alternate, probably less elegant solution than what vanburen posted, but I'd like to share it in case anyone else has a situation where it would be useful.

I added "hidden" list items to the list that has the logout link:

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="fizz">Fizz</a></li>
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="buzz">Buzz</a></li>
        <li class="hidden-lg hidden-md hidden-sm dropdown-link"><a href="blah">Blah</a></li>
        <li class="logout-link"><a href="logout">Logout</a></li>
      </ul>
    </div>

What this does is hide the links if the screen is not 'xs' size, which is the size where the hamburger menu appears.

This is a nice solution if you want items added to your hamburger menu that aren't necessarily found in a different navbar.