具有navbar-fixed-top的双引导菜单

Question

Found a number of examples, but none seem to be what I am looking for and can't seem to get it to work the way I need.

This is the closest example I can find , though the bootply doesn't seem the same.

The problem is the second menu gets hidden when the first menu is expanded (in mobile mode)

I need 2 menu's, both stuck to the top. I can get it to work with >= small, but xs with the collapsed menu is killing me. Basically looking for the standard fix nav twice. I don't want the second menu hidden when the first is expanded. Need it to look/act exactly the same way.

Sorry, I am a backend person with limited front end.

If there is no direct answer, should I have to sets of Nav tags? Or should the second menu be in a div or something else instead? I would have thought copying the example twice from bootstrap would work, but obviously not. If I can just get the secondary menu from hiding, I think I can figure the rest out.

( Bootply )

 /* CSS used here will be applied after bootstrap.css */ .HeaderMenu { margin-top: 53px; } .HeaderMenu .navbar { background-color: white; } .HeaderMenu .navbar-nav { width: 100%; text-align: center; margin-top: 0; } .HeaderMenu .navbar-nav > li { float: none; display: inline-block; } @media (max-width: 790px) { /*Try and stop login link from wrapping when small*/ .HeaderMenu .navbar-nav > li { float: left; } } .HeaderMenu span { font-size: 22px; font-weight: 600; } .HeaderMenu .collapsedMenu > li { display: block } /*Menu Collapse overrides*/ .collapsedMenu > li > a { padding: 3px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <header class="HeaderMenu"> <nav class="navbar navbar-fixed-top navbar-default" style=""> <!-- header nav --> <div class="container-fluid" style="padding-left: 0; padding-right: 0;"> <div class="navbar-header visible-xs" style="background-color: white; margin-right: 10px; height: 52px;"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-left visible-xs Logo" style="margin-left: 5px; margin-top: 18px"><a href="">Logo</a> </div> </div> <div class="collapse navbar-collapse" id="navbar-main-collapse" style="background-color: white;"> <!--Collapsed/expanded Menu--> <div class="visible-xs" style="text-align: center;"> <ul class="nav collapsedMenu"> <li class="active" style=""><a href="#" style="padding: 3px;"><span>H</span>OME</a> </li> <li style=""><a href="#" style="padding: 3px;"><span>W</span>IKIs</a> </li> <li><a href="#"><span>M</span>Y <span>S</span>ETUP</a> </li> <li><a href="#"><span>N</span>OTIFICATIONS</a> </li> <li><a href="#"><span>S</span>TORE</a> </li> </ul> </div> <!--Uncollapsed Menu--> <div class="container-fluid hidden-xs" style=""> <ul class="nav navbar-nav" style=""> <li class="navbar-left Logo hidden-sm" style=""> <a href="#" style="">Logo</a> </li> <li class="navbar-left LogoSm visible-sm" style=""> <a href="#" style="">Logo</a> </li> <li class="active" style=""><a href="#"><span>H</span>OME</a> </li> <li><a href="#"><span>W</span>IKI</a> </li> <li><a href="#"><span>N</span>OTIFICATIONS</a> </li> <li><a href="#"><span>S</span>TORE</a> </li> <li class="navbar-right hidden-sm" style="margin-right: 0; width: 155px;"><a href="#">Login</a> </li> <li class="navbar-right visible-sm" style="margin-right: 0; width: 140px;"><a href="#">Login</a> </li> </ul> </div> </div> </div> </nav> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> <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="#">Sub menu</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Sub menu link1</a> </li> </ul> </div> <!-- /.navbar-collapse --> </nav> </header> 

Answer 1

See if that helps.

 .wrapper { height: auto; background-color: #fff; margin-top: 120px; padding: 10px 20px; } .well { background-color: transparent; border: 3px solid #428bca; border-radius: 0px; text-align: center; font-size: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false"> <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> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a> </li> <li><a href="#">Link</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <div class="wrapper"> <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p> <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p> <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat vestibulum eu sit amet urna.</p> <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p> <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p> </div>