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

Олег

27.11.2016

Содержание:

Комментарии

Доброго времени суток!
Дело в том, что у меня глючит кнопка, под которую должна скрываться навигация на бутстрапе, она то исчезает, то снова появляется, само меню в нее не сворачивается. Пробовал прописывать

.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>

Изображения:

1.jpg 161,23 kb

Комментарии: 12

Александр Мальцев
2016-11-13 12:07:27
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.

Олег
2016-11-15 08:23:41
Класс! Спасибо большое! Работает как надо, но в слайдере стрелки куда-то исчезли и под кнопкой, куда меню сворачивается, полоска ненужная появилась. И еще такая проблема, кроме Home больше ни один пункт меню не выделяется в мобильной версии

Александр Мальцев

2016-11-16 12:57:00

Необходимо проверить стили CSS, которые вы установили для элементов…

Олег

2016-11-18 09:13:54

Спасибо, со стилями разобрался, но появилась другая проблема. Оказывается, пункты меню не выделялись потому, что контейнер, в котором находится слайдер вылазил на меню, я прописал ему отступ побольше, но при ширине и высоте 100% для всей страниц он вылезает за страницу, оставляя внизу огромный пробел, пробовал высоту и ширину страницы регулировать — адаптивность сбивается. Также, пробовал регулировать ширину и высоту самого контейнера — стрелки управления сбиваются.
Подскажите, пожалуйста, как можно настроить, чтобы и слайдер за страницу не лез и чтобы адаптивность сохранилась?

Александр Мальцев

2016-11-24 13:09:07

Смоделируйте вашу ситуацию на jsfiddle.net или на каком-нибудь другом подобном сервисе.

Олег

2016-11-26 08:22:37

Вот: jsfiddle.net/ce7vx8of/

Александр Мальцев

2016-11-27 10:09:29

Для того чтобы убрать полоску в 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 отступы.

Олег

2016-11-27 12:06:28

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

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

А как же без margin-отступов регулировать положение? Насчет ширины и высоты, если поставить фиксированную, то опять-таки сбивается адаптивность и страница тупо не уменьшается, при переходе в мобильную версию

Александр Мальцев

2016-11-27 14:32:29

Если пункты меню не видны, то значит, их тоже надо стилизовать. В Bootstrap для свёрнутого меню (<768px) тоже есть стили CSS.
Но float:right можно использовать не только к самому меню, а также к его элементам. Это позволит более точно настроить меню и при этом сохранить его функциональность.
Например, если вам необходимо выровнять пункты меню по правому краю, то float:right можно применить не ко всему меню, а только к:

<ul class="nav navbar-nav">

Тут всё зависит от того, что вы хотите сделать…
В CSS очень много инструментов для позиционирования элементов. Применять то или иной механизм необходимо в зависимости от задачи.

Олег

2016-12-02 09:40:20

Большое спасибо :)

Сергей

2016-11-11 05:33:36

Попробуй поменять «jquery-3.0.0.min.js», для нормальной работы достаточно v1.12.4

Олег
2016-11-12 08:45:49
Не помогло :(