Глюк с кнопкой адаптивной навигации на 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    278 0
    Загруженные файлы:
  • 1.jpg 161.23 kb

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

  1. Александр Мальцев # +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. Александр Мальцев # +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
                  Большое спасибо :)
            2. Александр Мальцев # 0
              Смоделируйте вашу ситуацию на jsfiddle.net или на каком-нибудь другом подобном сервисе.
              1. Олег # 0
      2. Сергей # 0
        Попробуй поменять «jquery-3.0.0.min.js», для нормальной работы достаточно v1.12.4
        1. Олег # 0
          Не помогло :(

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