jquery - Add sidebar links to Bootstrap "hamburger" menu -
i have page made in bootstrap has both top navbar , sidebar. currently, when resize page down smaller size (or view on mobile/tablet), sidebar disappears , top bar's links go "hamburger" menu (the dropdown shown @ smaller screen sizes). sidebar's links added hamburger menu well, not displayed on top bar when screen large.
currently here have 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 have side bar (located within '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 resize page down, dropdown menu appears in top right looks this:
logout and this:
fizz buzz blah ====== logout ...without adding "fizz buzz blah" top bar of full-sized screen. how can this? tried adding "dropdown" , "nav-navbar" classes sidebar column didn't work.
maybe or give ideas.
you separating nav links navbar-left / navbar-right , use navbar-left sidebar @ widths on 768px. links consolidate inside mobile navigation under 767px.
note: setup fullwidth layout (using container-fluid class), if you're using container class you'll have make adjustments widths.
see working example snippet @ fullpage.
body { padding-top: 50px; } @media screen , (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>
Comments
Post a Comment