Почему не отображается мобильное меню загрузочного навигатора?

Question

У меня есть два вопроса. Первым и самым важным является создание меню в миниатюрной версии. И второе, что я хочу, - это то, что navbar останется на вершине, когда я прокручу вниз и превращусь в черное с прозрачного, что это сейчас.

Кодекс:

<nav class="navbar-inner navbar-inverse"> 
    <div class="container"> 
    <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" href="#">Cosmos</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav pull-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
</nav> 

и КСС:

.navbar-inner { 
    background: transparent; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 1; 
} 

Вы также можете проверить codepen страницу проекта: https://codepen.io/georgekech/pen/ZLNMGE

Answer 1

Ответ на оба ваши вопросы:

При использовании начальной загрузки отзывчивости уже обработан. При условии правильной разметки на вашем HTML-бутстрап позаботится о меню на мобильном представлении. Следовательно, когда вы измените размер до мобильного вида, рядом с навигационной панелью будет «меню гамбургеров», которое переключит ваши параметры меню.

Далее, Если вы хотите, чтобы ваш заголовок оставался на вершине, когда вы прокручиваете вниз. Bootstrap уже предоставляет его. Вам нужно только заменить класс navbar-inverse на navbar-fixed-top на <nav>. Также важно удалить ненужные position: absolute свойства, приведенные в navbar-inner

.navbar-inner { 
    background: transparent; 
    position: absolute; //remove 
    top: 0; //remove 
    right: 0; //remove 
    left: 0; //remove 
    z-index: 1; 
} 

Далее, изменить фон навигационной панели при прокрутке вам нужно добавить 2 простых изменений, один к вашему JavaScript (с помощью JQuery) другой в ваш CSS, эти 2 изменения идут рука об руку.

JQuery:

$(function() { 
    $(document).scroll(function() { 
    var $nav = $(".navbar-fixed-top"); 
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height()); 
    }); 
}); 

CSS:

.navbar-fixed-top.scrolled { 
    background: black; 
} 

Jquery будет в основном добавить/удалить (тумблер) класс к панели навигации при прокрутке больше, чем высота навигационной панели. Конечно, CSS должен просто добавить цвет фона, когда класс добавлен из JQuery.

Your codepen here

Примечание:

1. Очевидно, не забудьте включить библиотеку JQuery для JavaScript, чтобы работать, в качестве альтернативы вы можете сделать то же самое, используя обычный JavaScript.

2. Если включить JQuery, так как вы используете Bootstrap v3.3.6, JQuery версия должна быть выше, чем 1.9.1, но и ниже 3. Все это вы можете найти here

Done deal!

Answer 2

.navbar-inner { 
background: transparent; 
position: absolute; 
top: 0; 
right: 0; 
left: 0; 
z-index: 1; 
} 

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

Чтобы изменить цвет меню на прокрутке, пожалуйста, проверьте этот ответ menu background change color on scroll.

Answer 3

Вам необходимо использовать то же имя, что и data-target, в качестве идентификатора div для меню. В этом случае, «бс-пример-Navbar коллапса-1» Так добавить id="bs-example-navbar-collapse-1 к div class="collapse navbar-collapse"

Для навигационной панели, вам не нужно использовать CSS, если вы используете загрузчик для того, что вы хотите. Добавьте класс «navbar-fixed-top» в элемент nav.

Если вы используете этот класс, вам нужно будет добавить body {padding-bottom: 70px; }. Это приведет к тому, что содержимое вашей страницы будет находиться под вашей навигационной панелью. 70px работает с вашим примером, но меняйте его по своему усмотрению.

Answer 4

Try После Код

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<!-- Bootstrap Navigation Start --> 
 
     <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
      <div class="container"> 
 
      <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" href="#">Cosmos</a> 
 
      </div> 
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <div> 
 
       <ul id="menu-hover" class="nav navbar-nav"> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Public Service</a></li> 
 
        <li><a href="#">Idea SubMission</a></li> 
 
        <li><a href="#">Power Division</a></li> 
 
       </ul> 
 
       </div> 
 
      </div> 
 
      </div> <!-- End Navbar Collapse --> 
 
     </nav> 
 
<!--End Bootstrap Navigation