In the mobile version of Bootstrap, how can I make sure that when opening the Navbar, the nested Dropdowns are already opened?
Here is the top Navbar, it has a Dropdown menu: http://getbootstrap.com/components/#navbar
On the wide screen, the Navbar is maximized and the Dropdown is minimized, as it should be.
And on a narrow mobile Navbar collapses and when you click on the menu button, it opens, but Dropdown is minimized, and I would like that when you click the expanded Navbar itself opens and Dropdown is also displayed expanded, and the arrow next to Dropdown can also be removed. Something like no I tried, but it didn't work without JS on a single CSS.
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@media only screen and (max-width:480px){
.dropdown-menu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
position:static;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
a.dropdown-toggle .caret {
display: none;
}
}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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-1">
<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</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
1 answers
To expand the drop-down list, Bootstrap adds the .open
class to the menu item with this list. Therefore, we are looking for everything that bootstrap. css says about .open
and .dropdown-menu
when the screen width is up to 767px
. It turns out a lot of things – and about the form, and about the color, and about visibility.
We remove .open
from the found instructions so that they act immediately. Add .navbar-nav
where necessary to open drop-down lists only inside the menu. And wrap everything in @media (max-width: 767px)
.
In the same media query we hide the black triangle at the switch.
Check: https://jsfiddle.net/glebkema/eL7eLq4L/
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@media (max-width: 767px) {
.navbar-nav .dropdown-toggle .caret {
display: none;
}
.navbar-nav .dropdown-menu {
display: block;
}
.navbar-nav .dropdown > a {
outline: 0;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
background-image: none;
}
.navbar-default .navbar-nav > > a,
.navbar-default .navbar-nav > > a:hover,
.navbar-default .navbar-nav > > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .dropdown-menu > li > a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav .dropdown-menu > .active > a,
.navbar-default .navbar-nav .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .dropdown-menu > .active > a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .dropdown-menu > .disabled > a,
.navbar-default .navbar-nav .dropdown-menu > .disabled > a:hover,
.navbar-default .navbar-nav .dropdown-menu > .disabled > a:focus {
color: #ccc;
background-color: transparent;
}
}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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-1">
<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</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>