boula boula - 5 months ago 43
Javascript Question

Bootstrap Dropdown menu does not collapse correctly in xs-view (below 768px)

I am using Bootstrap 3 loaded from a CDN, i am ok with the default breakpoints, i added some more css to position the ULs differently, depending on the breakpoint.

here is a picture with an overview

here is my html code:

<nav class="navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li class="button">
<button type="button" class="navbar-toggle dropdown-toggle hide" data-toggle="dropdown">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="http://localhost/category/1" title="Obstkörbe">
Obstkörbe
</a>
</li>


<li>
<a href="http://localhost/category/2" title="Frisches Obst">
Frisches Obst
</a>
</li>


<li>
<a href="http://localhost/category/3" title="Exotische Früchte">
Exotische Früchte
</a>
</li>


<li>
<a href="http://localhost/category/4" title="Getränke">
Getränke
</a>
</li>



</ul>
</li>
</ul>
<ul class="nav navbar-nav autoMargin navBrand">
<li>
<a href="http://localhost/" title="Web-based shop system" class="navbar-brand">Shop</a>
</li>
</ul>

<ul class="nav navbar-nav collapse navbar-collapse text-uppercase"><li>
<a href="http://localhost/category/1" title="Obstkörbe">
Obstkörbe
</a>
</li>


<li>
<a href="http://localhost/category/2" title="Frisches Obst">
Frisches Obst
</a>
</li>


<li>
<a href="http://localhost/category/3" title="Exotische Früchte">
Exotische Früchte
</a>
</li>


<li>
<a href="http://localhost/category/4" title="Getränke">
Getränke
</a>
</li>


</ul>

<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://localhost/#" class="noEvent dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-search"></span> Suche</a>
<ul class="dropdown-menu wider">
<li>
<form role="form" class="form-horinzontal container-fluid">
<input id="searchBar" name="identifier" placeholder="Suchbegriff hier eingeben.." required="" class="iterate form-control" data-validate="search" type="text">
<input name="ressource" value="search" type="hidden">
<input value="Suche" class="getRequest preventCartLogin btn btn-success form-control" type="submit">
</form>
</li>
</ul>
</li>
<li id="login" class="dropdown"><a href="http://localhost/#" class="noEvent dropdown-toggle" data-toggle="dropdown">Hallo! <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://localhost/formular/signIn">Einloggen</a></li>
<li><a href="http://localhost/formular/signUp">Neu Anmelden</a></li>
</ul>


</li>
<li id="cart"><a href="http://localhost/view/cart" class="noEvent"><span class="glyphicon glyphicon-shopping-cart"></span> Warenkorb</a>


</li>
</ul>

</div>


</nav>


and here my custom css:

div.container header nav, div.lead {
margin: 0;
}
.navbar, .jumbotron {
margin-bottom: 0;
}
.navbar-inverse {
border-radius: 0;
}

.dropdown-menu.wider{
width: 250px;
}
.navbar.navbar-inverse ul a{
color: #fff;
}
.navbar.navbar-inverse ul.dropdown-menu a{
color: inherit;
}
.noMargin{
margin: 0;
}
.noPadding{
padding: 0;
}
.autoMargin{

}
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.collapsing {
overflow: hidden !important;
}
ul.nav button{
display: block !important;
}
button span{
background-color: #fff;
border-radius: 1px;
display: block;
height: 2px;
width: 22px;
}
}
@media (max-width: 767px) {
.navbar-header {
float: left;
}
li.button{
padding-left: 15px;
}
ul.nav button{
display: block !important;
float: left;
}
button span{
background-color: #fff;
border-radius: 1px;
display: block;
height: 2px;
width: 22px;
}
nav ul{
display: inline-flex;
margin-right: 15px !important;
float: left !important;
}
.navbar-right{
float: right !important;
}
}
@media (max-width: 485px) {
ul.navBrand{
display: none !important;
}
}


i just want the navigation's drowdown-menus to behave like in the desktop view, but i can not figure out how to fix this.

Answer

Bootstrap when it collapses down to mobile view applies a dropdown menu to the navbar links. You need to overwrite bootstraps css with the default dropdown css or create your own.

.navbar-nav .open .dropdown-menu {
    position: absolute; 
    left: 0;
    z-index: 1000;
    float: left;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

quick fiddle of it https://jsfiddle.net/1bkdejed/