Выпадающее меню нажимает навигатор вниз. Как этого избежать?

Question

Я новичок в бутстрапе и веб-разработке.

Я хотел создать одну веб-страницу с двумя навигаторами и в зависимости от размера экрана будет отображаться только одна навигационная панель. Для размера экрана> 768 пикселей все работает нормально (по крайней мере, похоже). Для более низкого разрешения выпадающее меню вызывает навигацию по содержимому.

Как этого избежать? Любая помощь будет оценена по достоинству. Заранее спасибо.

Нажмите эту ссылку для jsfiddle https://jsfiddle.net/pavan39/rk6m3ho8/2/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
#header 
 
{ 
 
    position: relative; 
 
    z-index: 1010; 
 
} 
 
/* nav styling*/ 
 
.navbar-default{ 
 

 
    border-bottom: 0.5px solid rgb(180,180,180); 
 
} 
 
.navbar-brand{ 
 
    font-family:Comic Sans MS; 
 
    color:rgb(0,50,150); 
 
    font-size:150%; 
 
    font-weight:italic; 
 
} 
 
/*end*/ 
 

 
/*desktop bar related*/ 
 
@media(max-width:767px) 
 
{ 
 
    .desktop-bar{ 
 
    /*margin: 10px 10px 10px 10px;*/ 
 
    display:none;} 
 

 
} 
 
.mob-nav{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: -webkit-flex; 
 
    display:   flex; 
 
    -webkit-flex-flow: row; 
 
    flex-flow: row; 
 
    -webkit-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: flex-start; /* Safari */ 
 
    justify-content: flex-start; 
 
} 
 
.mob-home{ 
 
    -webkit-order: 1; /* Safari */ 
 
    order: 1; 
 
    -webkit-flex-grow: 1; /* Safari */ 
 
    flex-grow: 1; 
 
    margin-left:-1em; 
 
} 
 
.mob-search{ 
 
    /*width:50%; 
 
    margin-top:0.2em;*/ 
 
    margin-top:0.5em; 
 
    -webkit-order: 2; /* Safari */ 
 
    order: 2; 
 
    -webkit-flex-grow: 2; /* Safari */ 
 
    flex-grow: 2; 
 
    min-width:6em; 
 
    size:50% 
 
} 
 
.mob-notify{ 
 
    -webkit-order: 3; /* Safari */ 
 
    order: 3; 
 
    -webkit-flex-grow: 1; /* Safari */ 
 
    flex-grow: 1; 
 
    min-width:5em; 
 
} 
 
.mob-more{ 
 
    /*width:7em;*/ 
 
    -webkit-order: 4; /* Safari */ 
 
    order:4; 
 
    -webkit-flex-grow: 2; /* Safari */ 
 
    flex-grow: 2; 
 
    min-width:7em; 
 
} 
 

 
@media(min-width:768px) 
 
{ 
 
    .mobile-bar{ 
 
    /*margin: 10px 10px 10px 10px;*/ 
 
    display:none;} \t 
 
} 
 
/*end*/ 
 

 
.wrapper{ 
 
    padding-top:50px; 
 
} 
 
.badge-danger { 
 
    background-color: #d43f3a; 
 

 
} 
 

 
.badge-mob-notify{ 
 
    margin-left:-0.5em; 
 
    margin-top:-0.5em; 
 
}

<div id="header"> 
 
    <div class = "desktop-bar"> 
 
    <nav class="navbar navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class = "navbar-header"> 
 
      <a class="navbar-brand" href="#">Brand</a> 
 
     </div> 
 
     <ul class="nav navbar-nav navbar-left" role="navigation"> 
 
      <li role="presentation" class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <i class="fa fa-plus fa-lg "></i>&nbsp; <span >Add</span><span class=" caret"></span> 
 
      </a> 
 
      <ul class= "dropdown-menu"> 
 
       <li><a href="#">1</a></li> 
 
       <li><a href="#">2</a></li> 
 
       <li><a href="#">3</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">4</a></li> 
 
      </ul> 
 
      </li> 
 
      <li role="presentation"> 
 
      <form class= "desktop-search navbar-form navbar-left" role="search"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term"> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
       </span> 
 
       </div> 
 
      </form> 
 
      </li> 
 
     </ul> 
 

 
     <ul class="nav navbar-nav navbar-right" role="navigation"> 
 
      <li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li> 
 
      <li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li> 
 
      <li role="presentation" class= " dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup></span><span class="caret"></span> 
 
      </a> 
 
      <ul class= "dropdown-menu"> 
 
       <li><a href="#">Profile</a></li> 
 
       <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li> 
 
       <li><a href="#">Feedback</a></li> 
 
       <li><a href="#">Settings</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
    
 
    <div class = "mobile-bar"> 
 
    <nav class="navbar navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <ul class="mob-nav nav navbar-nav" role="navigation"> 
 
      <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li>   
 
      <li role="presentation" class="mob-search"> 
 
      <form class= "mob-search-bar navbar-search" role="search"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder= "" name="srch-term" id="srch-term"> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
       </span> 
 
       </div> 
 
      </form> 
 
      </li> 
 
      <li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li> 
 
      <li role="presentation" class="mob-more"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></span><span class="caret"></span> 
 
      </a> 
 
      <ul class= "dropdown-menu" style="z-index:99999;"> 
 
       <li><a href="#">Profile</a></li> 
 
       <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li> 
 
       <li><a href="#">Favorites</a></li> 
 
       <li><a href="#">Feedback</a></li> 
 
       <li><a href="#">Settings</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class ="nav"> 
 
    nav 
 
    </div> 
 
    <div class="article"> 
 
    artcle 
 
    </div> 
 
    <div class="aside"> 
 
    aside 
 
    </div> 
 
</div> 
 

 
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

CSS для выпадающего меню Bootstrap, которая не разрушилась на узком экране

Bootstrap основывается на предположении, что все элементы меню становятся свернутыми, когда ширина экрана составляет 767 пикселей или меньше. Поэтому выпадающее меню меняет свое поведение. Теперь он открывается, как часть общего сложенного меню.

Так что вам нужно переопределить стили для класса .navbar-nav .open .dropdown-menu. Я использую этот вариант:

@media (max-width: 767px) { 
    .navbar-nav .open .dropdown-menu { 
    position: absolute; 
    right: 0; 
    left: auto; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    background-color: #fff; 
    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); 
    } 
    .navbar-nav .open .dropdown-menu > li > a { 
    color: #000; 
    padding: 3px 20px; 
    line-height: 1.42857143; 
    } 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #333; 
    background-color: #e7e7e7 !important; 
    background-image: none; 
    } 
    .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #555; 
    background-color: #e7e7e7 !important; 
    } 
    .navbar-nav .open .dropdown-menu > .disabled > a, 
    .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
    .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
    color: #ccc; 
    background-color: transparent; 
    } 
} 

Пожалуйста, проверьте результат: https://jsfiddle.net/glebkema/c7thd7gh/

$(document).ready(function() { 
 
    $('.dropdown-toggle').dropdown(); 
 
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
#header { 
 
    position: relative; 
 
    z-index: 1010; 
 
} 
 

 
/* nav styling*/ 
 
.navbar-default { 
 
    border-bottom: 0.5px solid rgb(180, 180, 180); 
 
} 
 
.navbar-brand { 
 
    font-family: Comic Sans MS; 
 
    color: rgb(0, 50, 150); 
 
    font-size: 150%; 
 
    font-weight: italic; 
 
} 
 

 
/*desktop bar related*/ 
 
@media (max-width:767px) { 
 
    .desktop-bar { 
 
    /*margin: 10px 10px 10px 10px;*/ 
 
    display: none; 
 
    } 
 
} 
 
.mob-nav { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: -webkit-flex; 
 
    display:   flex; 
 
    -webkit-flex-flow: row; 
 
      flex-flow: row; 
 
    -webkit-flex-wrap: nowrap; 
 
      flex-wrap: nowrap; 
 
    -webkit-justify-content: flex-start; 
 
      justify-content: flex-start; 
 
} 
 
.mob-home { 
 
    -webkit-order: 1; 
 
      order: 1; 
 
    -webkit-flex-grow: 1; 
 
      flex-grow: 1; 
 
    margin-left: -1em; 
 
} 
 
.mob-search { 
 
    /*width:50%; 
 
\t margin-top:0.2em;*/ 
 
    margin-top: 0.5em; 
 
    -webkit-order: 2; 
 
      order: 2; 
 
    -webkit-flex-grow: 2; 
 
      flex-grow: 2; 
 
    min-width: 6em; 
 
    size: 50% 
 
} 
 
.mob-notify { 
 
    -webkit-order: 3; 
 
      order: 3; 
 
    -webkit-flex-grow: 1; 
 
      flex-grow: 1; 
 
    min-width: 5em; 
 
} 
 
.mob-more { 
 
    /*width:7em;*/ 
 
    -webkit-order: 4; 
 
      order: 4; 
 
    -webkit-flex-grow: 2; 
 
      flex-grow: 2; 
 
    min-width: 7em; 
 
} 
 
@media(min-width:768px) { 
 
    .mobile-bar { 
 
    /*margin: 10px 10px 10px 10px;*/ 
 
    display: none; 
 
    } 
 
} 
 
.wrapper { 
 
    padding-top: 50px; 
 
} 
 
.badge-danger { 
 
    background-color: #d43f3a; 
 
} 
 
.badge-mob-notify { 
 
    margin-left: -0.5em; 
 
    margin-top: -0.5em; 
 
} 
 

 
/* dropdown menu */ 
 
@media (max-width: 767px) { 
 
    .navbar-nav .open .dropdown-menu { 
 
    position: absolute; 
 
    right: 0; 
 
    left: auto; 
 
    padding: 5px 0; 
 
    margin: 2px 0 0; 
 
    background-color: #fff; 
 
    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); 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a { 
 
    color: #000; 
 
    padding: 3px 20px; 
 
    line-height: 1.42857143; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
 
    color: #333; 
 
    background-color: #e7e7e7 !important; 
 
    background-image: none; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > .active > a, 
 
    .navbar-nav .open .dropdown-menu > .active > a:hover, 
 
    .navbar-nav .open .dropdown-menu > .active > a:focus { 
 
    color: #555; 
 
    background-color: #e7e7e7 !important; 
 
    } 
 
    .navbar-nav .open .dropdown-menu > .disabled > a, 
 
    .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
 
    .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
 
    color: #ccc; 
 
    background-color: transparent; 
 
    } 
 
}

<div id="header"> 
 
    <div class="desktop-bar"> 
 
    <nav class="navbar navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Brand</a> 
 
     </div> 
 
     <ul class="nav navbar-nav navbar-left" role="navigation"> 
 
      <li role="presentation" class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <i class="fa fa-plus fa-lg "></i>&nbsp; <span>Add</span><span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">1</a></li> 
 
       <li><a href="#">2</a></li> 
 
       <li><a href="#">3</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">4</a></li> 
 
      </ul> 
 
      </li> 
 
      <li role="presentation"> 
 
      <form class="desktop-search navbar-form navbar-left" role="search"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder="Search a place" name="srch-term" id="srch-term"> 
 
       <span class="input-group-btn"> 
 
\t \t \t \t \t \t \t \t \t \t <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
\t \t \t \t \t \t \t \t \t </span> 
 
       </div> 
 
      </form> 
 
      </li> 
 
     </ul> 
 

 
     <ul class="nav navbar-nav navbar-right" role="navigation"> 
 
      <li role="presentation"><a href="#"><i class=" fa fa-heart fa-lg"></i>&nbsp; <span class=" nav-description">Favorites</span></a></li> 
 
      <li role="presentation"><a href="#"><i class=" fa fa-bell fa-lg"></i>&nbsp; <span class=" nav-description">Notifications<sup><span class="badge badge-danger badge-notify">8</span></sup></span></a></li> 
 
      <li role="presentation" class=" dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-msgs">6</span></sup> 
 
       </span><span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Profile</a></li> 
 
       <li><a href="#">Messages<sup><span class="badge badge-danger badge-msgs">6</span></sup></a></li> 
 
       <li><a href="#">Feedback</a></li> 
 
       <li><a href="#">Settings</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 

 
    <div class="mobile-bar"> 
 
    <nav class="navbar navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <ul class="mob-nav nav navbar-nav" role="navigation"> 
 
      <li role="presentation" class="mob-home"><a href="#"><i class="fa fa-home "></i>&nbsp;</a></li> 
 
      <li role="presentation" class="mob-search"> 
 
      <form class="mob-search-bar navbar-search" role="search"> 
 
       <div class="input-group"> 
 
       <input type="text" class="form-control" placeholder="" name="srch-term" id="srch-term"> 
 
       <span class="input-group-btn"> 
 
\t \t \t \t \t \t \t \t \t <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
 
\t \t \t \t \t \t \t \t </span> 
 
       </div> 
 
      </form> 
 
      </li> 
 
      <li role="presentation" class="mob-notify"><a href="#"><i class=" fa fa-bell fa"></i>&nbsp;<sup><span class="badge badge-danger badge-mob-notify">8</span></sup></a></li> 
 
      <li role="presentation" class="mob-more dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
       <span class=" nav-description"><img style = "height:22px; width:22px" src = "pseudo.png" class = " img-circle"><sup><span class="badge badge-danger badge-mob-msgs">6</span></sup> 
 
       </span><span class="caret"></span> 
 
      </a> 
 
      <ul class="dropdown-menu" style="z-index:99999;"> 
 
       <li><a href="#">Profile</a></li> 
 
       <li><a href="#">Messages<sup><span class="badge badge-danger badge-mob-msgs">6</span></sup></a></li> 
 
       <li><a href="#">Favorites</a></li> 
 
       <li><a href="#">Feedback</a></li> 
 
       <li><a href="#">Settings</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Logout</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="nav"> 
 
    nav 
 
    </div> 
 
    <div class="article"> 
 
    artcle 
 
    </div> 
 
    <div class="aside"> 
 
    aside 
 
    </div> 
 
</div> 
 

 
<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>