I'm trying to get multiple navigations working using bootstrap 3. Currently I have an issue where the first menu clicked (ie the burger menu on the left - see attached images) opens all the menu items. The next click closes all the items then subsequent clicks behave as expected with one menu item open at a time.
<div class="navbar navbar-inverse navbar-fixed-top" id="#navGroup">
<div class="container">
<div class="row" id="navGroup">
<div class="navbar-header col-xs-4">
<button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".burger-collapse" data-parent="#navGroup">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header col-xs-4">
<a class="navbar-brand" href='@Url.Action("Home", "Home")'>
<i class="glyphicon glyphicon-home logo-glyph"></i>
</a>
</div>
<div class="navbar-header col-xs-4">
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-user" data-toggle="collapse" data-target=".profile-collapse" data-parent="#navGroup"></button>
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-bell" data-toggle="collapse" data-target=".notifications-collapse" data-parent="#navGroup"></button>
<button class="navbar-toggle glyphicon air-listing-nav glyphicon-question-sign" data-toggle="collapse" data-target=".help-collapse" data-parent="#navGroup"></button>
</div>
</div>
<div class="navbar-collapse collapse burger-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Home", "Home")</li>
<li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right profile-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
<li>@Html.ActionLink("Settings", "Settings", "ManageSettings")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right notifications-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Notifications", " ", "Profile")</li>
</ul>
</div>
<div class="navbar-collapse collapse navbar-right help-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Help", " ", "Profile")</li>
</ul>
</div>
</div>
</div>
JS :
<script>
$(function () {
$(document).click(function (event) {
$('.navbar-collapse').collapse('hide');
});
});
</script>
Attached Images
(please ignore styling issues for now, once the menus are working correctly I'll work on styles)
Click burger menu and All Nav items open
Should have just one menu open at a time
I've searched everywhere but can't find an answer that works for me. I am using data parent as suggested elsewhere & have unique data-targets for each menu.
Any help would be appreciated.
I think that you can simplify it for yourself based on this example: dropdown example
In practice:
.navbar-brand-centered { position: absolute; left: 50%; width: 160px; text-align: center; } .navbar>.container .navbar-brand-centered { margin-left: -80px!important; } .navbar-nav>li, .navbar-nav{ float: left !important; } .navbar-right { float: right !important; } .nav.navbar-nav .dropdown { width: 48px; position: relative; } .nav.navbar-nav { margin: 0; } .nav.navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } .nav.navbar-nav .dropdown.open .dropdown-menu li a:hover { color: #262626; text-decoration: none; background-color: #f5f5f5; } .nav.navbar-nav .dropdown ul { position: absolute; top: 100%; left: 0; float: left; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px; } .nav.navbar-nav.navbar-right .dropdown ul { right: 0; left: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="my-example"> <nav id="myNavbar" class="navbar navbar-inverse navbar-toggleable navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand navbar-brand-centered"> <a href="#"> <i class="fa fa-lg fa-home"></i> </a> </div> </div> <!--first burger like dropdown--> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-lg fa-bars"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> <!--group of 3 icon dropdowns--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-question"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-user"></i> </a> <ul class="dropdown-menu"> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> </div> </nav> </div>
And I am not sure why you need that script on the bottom.
edit: changed to be more responsive
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.