Глюк с кнопкой адаптивной навигации на bootstrap 3

Доброго времени суток!
Дело в том, что у меня глючит кнопка, под которую должна скрываться навигация на бутстрапе, она то исчезает, то снова появляется, само меню в нее не сворачивается. Пробовал прописывать
.navbar-toggle {
  display: block;
}

Так она не исчезает в десктопной версии шаблона, прописываю none — вообще не появляется. Ниже весь код навигации и скрины шаблона. Помогите, пожалуйста, совсем недавно начал знакомство с бутстрапом, особых проблем не было, но с кнопкой очень долго туплю уже :(

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <title>Document</title>
</head>
<body>
<div class="logo">
    <img src="images/logo.png" class="img-responsive"  class="pull-left" alt="logo">
</div>

<div class="navbar navbar-right navbar-default">
    <div class="container-fluid">
            <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#responsive-menu">
                <span class="sr-only">navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            </div>


            <!-- Everything you want hidden at 940px or less, place within here -->
            <div class="collapse nav-collapse" id="responsive-menu">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contacts</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


   Вопросы 0    101 0
    Загруженные файлы:
  • 1.jpg 161.23 kb

Комментарии (12)

  1. Сергей # 0
    Попробуй поменять «jquery-3.0.0.min.js», для нормальной работы достаточно v1.12.4
    1. Олег # 0
      Не помогло :(
    2. Александр Мальцев # +1
      1. Убрать класс navbar-right. Он предназначен для выравнивания элеметов меню, но не самого меню.
      2. Класс nav-collapse заменить на navbar-collapse у элемента:
      div class="collapse nav-collapse" id="responsive-menu">
      
      3. Поменять версию Bootstrap с 3.3.6 на 3.3.7. Только версия 3.3.7 «дружит» с jQuery 3.
      1. Олег # 0
        Класс! Спасибо большое! Работает как надо, но в слайдере стрелки куда-то исчезли и под кнопкой, куда меню сворачивается, полоска ненужная появилась. И еще такая проблема, кроме Home больше ни один пункт меню не выделяется в мобильной версии
        1. Александр Мальцев # +1
          Необходимо проверить стили CSS, которые вы установили для элементов…
          1. Олег # 0
            Спасибо, со стилями разобрался, но появилась другая проблема. Оказывается, пункты меню не выделялись потому, что контейнер, в котором находится слайдер вылазил на меню, я прописал ему отступ побольше, но при ширине и высоте 100% для всей страниц он вылезает за страницу, оставляя внизу огромный пробел, пробовал высоту и ширину страницы регулировать — адаптивность сбивается. Также, пробовал регулировать ширину и высоту самого контейнера — стрелки управления сбиваются.
            Подскажите, пожалуйста, как можно настроить, чтобы и слайдер за страницу не лез и чтобы адаптивность сохранилась?
            1. Александр Мальцев # 0
              Смоделируйте вашу ситуацию на jsfiddle.net или на каком-нибудь другом подобном сервисе.
              1. Олег # 0
              2. Александр Мальцев # +1
                Для того чтобы убрать полоску в CSS необходимо добавить следующий стиль:
                .navbar-default .navbar-collapse, .navbar-default .navbar-form {
                  border-color: transparent;
                }
                
                Основная проблема в вашем макете связана с тем, что вы меню navbar сделали плавающей (float: right) для маленьких экранов (xs). Если вам его необходимо как-то позиционировать её для больших экранов (>xs), то делайте это только для них и не применяйте данные стили для xs.
                Т.е. как-то так:
                @media (min-width:768px) {
                  .navbar{
                    margin-bottom: 300px;
                    margin-right: 250px;
                    background-color: transparent;
                    border-style: none;
                    float: right;
                  }
                }
                
                Непонятно зачем вы высоту устанавливаете 100% и также зачем вы используете margin отступы.
                1. Олег # 0
                  Сделал, как вы сказали, вроде бы помогло, но в мобильной версии все стили меню сбиваются, т.е. сверху появляется белая полоса с кнопкой, но сами пункты меню при этом не видны.

                  float:right прописываю т.к. мне нужно, чтобы меню было строго справа, а так оно в середину уходит или вообще непонятно куда.

                  А как же без margin-отступов регулировать положение? Насчет ширины и высоты, если поставить фиксированную, то опять-таки сбивается адаптивность и страница тупо не уменьшается, при переходе в мобильную версию
                  1. Александр Мальцев # +1
                    Если пункты меню не видны, то значит, их тоже надо стилизовать. В Bootstrap для свёрнутого меню (<768px) тоже есть стили CSS.
                    Но float:right можно использовать не только к самому меню, а также к его элементам. Это позволит более точно настроить меню и при этом сохранить его функциональность.
                    Например, если вам необходимо выровнять пункты меню по правому краю, то float:right можно применить не ко всему меню, а только к:
                    <ul class="nav navbar-nav">
                    
                    Тут всё зависит от того, что вы хотите сделать…
                    В CSS очень много инструментов для позиционирования элементов. Применять то или иной механизм необходимо в зависимости от задачи.
                    1. Олег # 0
                      Большое спасибо :)

        Вы должны авторизоваться, чтобы оставлять комментарии.