Bootstrap Nav Bar Mobile Expand Button Not Working

Итак, я работаю с этой навигационной панелью загрузки. При изменении ширины окна ниже примерно 767 пикселей или около того он принимает все ссылки на навигационную панель и вместо этого отображает кнопку расширения. В основном для мобильных пользователей. Это правильное поведение и то, что я ожидаю.Bootstrap Nav Bar Mobile Expand Button Not Working

Но при нажатии этой новой кнопки мобильного расширения ничего не происходит. Я хочу, чтобы он расширялся и показывал меню со всеми ссылками, которые были удалены в панели навигации. Например, this page. При изменении размера окна в меньшем размере создается эта кнопка, и она доступна для просмотра. Это то, чего я пытаюсь достичь.

Я создал codepen here. Я также перечислял небольшой фрагмент моего кода ниже. Но codepen дает лучший интерактивный пример того, что происходит. Любые идеи, что я делаю неправильно, и почему эта кнопка расширения не доступна?

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigationbar" 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="#">My App</a> 
</div>

источник

2016-07-17 Charlie Fish

Возможно, вам также потребуется загрузить библиотеку jQuery. Ответ на следующую ссылку может помочь. http://stackoverflow.com/questions/38189481/bootstrap-hamburger-menu-not-working/38189610#38189610 – GoMega54

@ GoMega54 Это сработало, но порядок ссылок неверен в этом ответе. Также необходимо указать на контейнер меню навигации, как сказал Деян Лакманович. Не стесняйтесь отправлять ответ, и я буду его продвигать :) –

data-target="#navigationbar"

следует указать контейнер меню навигации.

Таким образом, в вашем случае, это должно быть:

data-target="#bs-example-navbar-collapse-1"

источник

2016-07-17 19:23:28

Это сработало, но также необходимо было добавить библиотеку jQuery и bootstrap js, как сказал GoMega54. Спасибо за вашу помощь! –

Вам нужно будет загрузить библиотеку JQuery и библиотеку Bootstrap JS для выпадающего меню для работы на мобильных экранах.

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

источник

2016-07-17 19:45:02 GoMega54

Bootstrap Nav Bar Mobile Expand Button Not Working

ответ

Смежные вопросы