navbar не отображается правильно в bootstrap на мобильных устройствах

Question

Я пытаюсь создать навигационную панель, как показано на изображении, и я также предоставил код, который я использовал.

Я доволен представлением на веб-интерфейсе, однако вид на мобильном устройстве полностью запутан. Я предоставил скриншоты с обоих устройств.

Логотип не является даже частью навигационной панели и у меня возникают проблемы с помощью меню правой стороны.

header.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

<nav class="navbar navbar-default"> 
<div class="container-fluid"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <ul class="nav navbar-nav"> 

    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     <span class="glyphicon glyphicon-th"></span> 
     </a> 
     <ul class="dropdown-menu"> 
     <li><a href="/home">Home</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="/admin">Admin</a></li> 
     <li><a href="/holidays">Holidays</a></li> 
     <li><a href="/leave">Leave</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="/billing">Billing</a></li> 
     <li><a href="/reports">Reports</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="/login/logout">Logout</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

<a class="brand" style="margin: 0; float: none;" href="/home"><img src="http://www.chutti.work/assets/images/logo-final.png" width="130"/></a> 


<!-- 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 navbar-right"> 
    <li> 
     <a href="/user/profile/"> 
      User Profile 
      <?php //echo $this->session->userdata['user_fname']." ".$this->session->userdata['user_lname']; ?> 
     </a> 
    </li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-bell"></span></a> 
     <ul class="dropdown-menu"> 
     <li><p class="text-muted" align="center">Notifications</p></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </li> 
    </ul> 
</div><!-- /.navbar-collapse --> 

Answer 1

Один из способов сделать это, чтобы поместить левую навигационную ниспадающее меню внутри NavBar-заголовка, так что остается открытой во все времена, а затем поместить его. Вы также можете разместить логотип навигатора в центре, не размещая его внутри ссылок.

См. Рабочий пример Фрагмент.

.navbar.navbar-custom { 
 
    background: white; 
 
} 
 
.navbar-custom .navbar-brand.navbar-brand-centered img { 
 
    position: absolute; 
 
    left: 50%; 
 
    display: block; 
 
    width: 130px; 
 
    text-align: center; 
 
    top: 0; 
 
} 
 
.navbar.navbar-custom > .container .navbar-brand.navbar-brand-centered img, 
 
.navbar.navbar-custom > .container-fluid .navbar-brand.navbar-brand-centered img { 
 
    margin-left: -65px; 
 
} 
 
.navbar.navbar-custom .navbar-upper { 
 
    position: absolute; 
 
    left: 0px; 
 
} 
 
@media (max-width: 767px) { 
 
    .navbar.navbar-custom .navbar-upper { 
 
    top: -3px; 
 
    left: 15px; 
 
    background: none; 
 
    } 
 
    .navbar.navbar-custom .navbar-upper .dropdown-menu { 
 
    background: white; 
 
    margin-top: 6px; 
 
    -webkit-background-clip: padding-box; 
 
    background-clip: padding-box; 
 
    border: 1px solid #ccc; 
 
    border: 1px solid rgba(0, 0, 0, .15); 
 
    border-top: none; 
 
    border-radius: 0; 
 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
 
    } 
 
    .navbar.navbar-custom .navbar-upper .nav li.dropdown.open > .dropdown-toggle, 
 
    .navbar.navbar-custom .navbar-upper .nav li.dropdown.active > .dropdown-toggle, 
 
    .navbar.navbar-custom .navbar-upper .nav li.dropdown.open.active > .dropdown-toggle { 
 
    background: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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 navbar-brand-centered" href="/home"> 
 
     <img src="http://www.chutti.work/assets/images/logo-final.png" /> 
 
     </a> 
 

 
     <div class="navbar-upper"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-th"></span> 
 
      </a> 
 

 
      <ul class="dropdown-menu"> 
 
       <li><a href="/home">Home</a> 
 

 
       </li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="/admin">Admin</a> 
 

 
       </li> 
 
       <li><a href="/holidays">Holidays</a> 
 

 
       </li> 
 
       <li><a href="/leave">Leave</a> 
 

 
       </li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="/billing">Billing</a> 
 

 
       </li> 
 
       <li><a href="/reports">Reports</a> 
 

 
       </li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="/login/logout">Logout</a> 
 

 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li> <a href="/user/profile/">Profile</a> 
 

 
     </li> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-bell"></span></a> 
 

 
      <ul class="dropdown-menu"> 
 
      <li> 
 
       <p class="text-muted" align="center">Notifications</p> 
 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Action</a> 
 

 
      </li> 
 
      <li><a href="#">Action</a> 
 

 
      </li> 
 
      <li><a href="#">Another action</a> 
 

 
      </li> 
 
      <li><a href="#">Something else here</a> 
 

 
      </li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a> 
 

 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <div class="well">Welllll</div> 
 
</div>