Nathan Riley
asked on
Bootstrap - Two Navigation Menus combined in Mobile View
I have two menus on my desktop site. When I view on mobile the bootstrap mobile menu only shows my secondary menu and the first one is missing completely.
What's the best method to show both menu options in the single menu dropdown mobile view?
https://jsfiddle.net/2ku67ou7/
What's the best method to show both menu options in the single menu dropdown mobile view?
https://jsfiddle.net/2ku67ou7/
<!--Skinny Top Nav-->
<nav class="navbar navbar-default navbar-fixed-top" style="height:25px;min-height:25px;background:#fff;">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/messages" style="height: 25px;padding:3px 15px;font-size:12px;">
<span class="badge badge-success" style="position:absolute;top:1px;background-color:red;right:87px;z-index:999;font-size:12px;font-weight:600;padding:2px 5px;"><?php echo $unread;?></span>
<?php ;}?>
<i class="fa fa-envelope"></i> MESSAGES
</a>
</li>
<li><a href="/admin" style="height: 25px;padding:3px 15px;font-size:12px;"><i class="fa fa-cog"></i> ADMIN</a></li>
<li><a href="/account" style="height: 25px;padding:3px 15px;font-size:12px;"><i class="fa fa-user"></i> ACCOUNT</a></li>
<li><a href="logout.php" style="height: 25px;padding:3px 15px;font-size:12px;">LOGOUT</a></li>
</ul>
</div>
</div>
</nav>
<!--Second nav bar-->
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:25px;height:75px;min-height:75px;background:#fff;border-color:#eb6e1f;border-width:0 0 2px;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="/dashboard" style="padding:10px 15px;">
<?php if($logo == 'default'){?>
<img src="images/logo_20150430123817.png" style="width:100%;max-width:200px;max-height:50px;"/>
<?php ;}else{?>
<img src="upload/<?php echo $orgID;?>/<?php echo $logo;?>" style="width:100%;max-width:200px;max-height:50px;"/>
<?php ;}?>
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right navStyle" style="margin-top:28px;background:#fff;">
<li><a href="/">DASHBOARD</a></li>
<li><a href="assets">ASSETS</a></li>
<li class="dropdown">
<a href="#" style="padding-bottom:10px;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">TRAINING</a>
<ul class="dropdown-menu" role="menu" style="text-align:center;">
<li><a href="library">LIBRARY</a></li>
<li><a href="forums">FORUMS</a></li>
</ul>
</li>
<li><a href="reports">REPORTS</a></li>
</ul>
</div>
</div>
</nav>
Got it! https://jsfiddle.net/2ku67ou7/
There's som styling work to do but I think it could work. The secret is to replace the data-target value with a class and give this class to both div which actually hold the two navbars
Hope this helps
There's som styling work to do but I think it could work. The secret is to replace the data-target value with a class and give this class to both div which actually hold the two navbars
Hope this helps
ASKER
On your second answer when I take a look at your link I still only show options from the second sidebar in the mobile view, are you sure you posted the correct link?
Thanks
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://jsfiddle.net/RfsS9/5/