Bootstrap Navbar сворачивается, когда не предполагается

Question

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

На рабочем столе первый Navbar содержит информацию с правой стороны, которая идеально подходит, как показано ниже:

Однако когда я меняю на маленьком экране он появляется, как показано ниже:

Есть ли способ изменить это так, чтобы на маленьком экране он не рухнул? Если какой-либо css необходим, возможно ли изменить ID, чтобы он не мешал моему другому NavBar и его CSS?

На данный момент мой код:

<div class="container-fluid"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li> 
     <li><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li> 
     <li><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li> 
    </ul> 
</div> 

Спасибо за любую помощь!

Edit:

Это мой другой Navbar, который находится ниже моего логотипа, который работает отлично: Я надеюсь, что это помогает немного.

<div class="container"> 
      <nav class="navbar navbar-default" role="navigation"> 
       <!-- 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=".navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="index.php">Home</a></li> 
         <li><a href="#">Collections</a></li> 
         <li><a href="earth_products.php">Jewellry</a></li> 
         <li><a href="#">Offers</a></li> 
        </ul> 
       </div><!-- /.navbar-collapse --> 
      </nav> 

     </div> 

CSS для этого навигационной панели:

.navbar .navbar-nav { 
display: inline-block; 
float: none; 
color: #000000; 
} 

.navbar .navbar-collapse { 
text-align: center; 
} 

.navbar-default { 
background-color: #44B5DB; 
border-color: #000000; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li  > a:focus { 
background-color: #FFFFFF; 
color: #000000; 
} 

.navbar-default .navbar-nav > li > a { 
color: #000000; 
} 

Я подумал, что может быть проще, показывая картину. Итак, в основном мой Navbar # 1 должен показать:

Зарегистрируйтесь и скачать этот Navbar файл по цене от за большой размер. Вход | Оформить заказ

Даже на небольших устройствах, а не на одном на другом. В соответствии с изображением моя текущая настройка: Navbar # 1, логотип, Navbar # 2

Надеюсь, это имеет смысл!

Answer 1

Вы можете добавить некоторые настройки в upper-navigation дел до этого не развалится, используя navbar-default класс в качестве основы. И верхний и нижний линейки навигаторов (им не обязательно, хотя).

Я также скорректировал ваш CSS, так что линия линий линии работает, когда вы наводите на них курсор; теперь щель удаляется снизу.

.navbar-default.nav-top { 
 
    background: #fff; 
 
} 
 
.navbar-default.nav-top ul { 
 
    display: inline-block; 
 
    float: right; 
 
} 
 
.navbar-default .navbar-top li { 
 
    float: left; 
 
    font-size: 12px; 
 
} 
 
.navbar.navbar-custom { 
 
    background: #44B5DB; 
 
    border-color: #000000; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a { 
 
    color: #000000; 
 
} 
 
.navbar.navbar-custom .navbar-nav > li > a:hover, 
 
.navbar.navbar-custom .navbar-nav > li > a:focus { 
 
    background: #FFFFFF; 
 
    color: #000000; 
 
    width: 100%; 
 
} 
 
.navbar.navbar-custom .navbar-nav { 
 
    text-align: center; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.navbar-custom .navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    } 
 
    .navbar.navbar-custom .navbar-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<nav class="navbar-default nav-top"> 
 
    <div class="container"> 
 
    <ul class="nav navbar-top"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"> </span> Sign Up</a> 
 

 
     </li> 
 
     <li><a href="#"><span class = "glyphicon glyphicon-log-in"></span> Login</a> 
 

 
     </li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default navbar-custom"> 
 
    <!-- 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-navbar" 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> 
 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-navbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="index.php">Home</a> 
 

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

 
     </li> 
 
     <li><a href="earth_products.php">Jewellry</a> 
 

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

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div>

Answer 2

Просто убедитесь, что элементы списка в вашей верхней навигационной панели будут размещены слева на маленьких экранах. Вы также можете захотеть поместить родительский элемент вправо.

Я добавил несколько дополнительных классов, поэтому вы не перезаписываете стиль по умолчанию, потому что вы не хотите влиять на другие навигаторы, как я предлагаю.

Уверен, что вы получите эту идею.

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

 
/* Keep list elements floated so they do not collapse */ 
 
.navbar-nav>li.top-nav { 
 
    float: left; 
 
} 
 
/* keep the ul floated to the right */ 
 
.top-nav-right { 
 
    float: right!important; 
 
} 
 

 

 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    color: #000000; 
 
} 
 

 
.navbar .navbar-collapse { 
 
    text-align: center; 
 
} 
 

 
.navbar-default { 
 
    background-color: #44B5DB; 
 
    border-color: #000000; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li  > a:focus { 
 
    background-color: #FFFFFF; 
 
    color: #000000; 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    color: #000000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 
    <ul class="nav navbar-nav navbar-right top-nav-right"> 
 
    <li class="top-nav"><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li> 
 
    <li class="top-nav"><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li> 
 
    <li class="top-nav"><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li> 
 
    </ul> 
 
</div> 
 
<div class="container"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <!-- 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=".navbar-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="index.php">Home</a></li> 
 
     <li><a href="#">Collections</a></li> 
 
     <li><a href="earth_products.php">Jewellry</a></li> 
 
     <li><a href="#">Offers</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </nav> 
 
</div>