Как заставить загрузочный navbar нажимать всю страницу в мобильном меню?

Хотя есть связанный вопрос, его проблема кажется моим решением, но у меня нет идеи для достижения прогресса.

Я использую bootstrap navbar, который установлен на верх, чтобы сделать меню навигации. на мобильных страницах (где размер экрана мал), я должен привести их, нажав кнопку меню в верхнем правом углу.

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

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

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#!/">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#!/notice">notice</a></li>
                <li><a href="#!/board">board</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                <a id="a-logout" href="#!/logout">sign out</a>
                </li>
                <li>
                <a href="#!/user">Your page</a>
                </li>
            </ul>
        </div>
    </div>
</div>

ОТВЕТЫ

Ответ 1

Кажется, что вы определили высоту .navbar, которая заставляет свернутое меню оверлей. Просто измените высоту в .navbar на min-height

.navbar
{
 min-height:65px; // or value of ur desire
}

Если не удалось найти добрый пост ur CSS тоже

Ответ 2

добавить

$('.navbar-toggle').on('click', function() {
  $('.after-navbar').css('margin-top','230px');
});

Пожалуйста, найдите здесь рабочий пример http://jsfiddle.net/LptkL/

Ответ 3

Вам нужно оживить тело. Мне нужно будет увидеть больше кода, чтобы получить это точно, и вам понадобится jQuery, но попробуйте это...

$('.navbar').on('click', function() {
    var height = ($('.navbar-collapse.in').length == 0) ? $(this).height() : 0;
    $('body').css({
        marginTop: height
    })
});

UPDATE: включить код для учетной записи, если навигатор находится или выходит. Это действительно не сработает, так как вам нужно будет запустить большую часть этого кода после того, как навигатор будет анимирован. Однако вы можете удалить $(this).height() и заменить на жестко закодированное количество пикселей, равное высота вашего навигатора.

Ответ 4

Возможно, вы ищете max-height:

CSS

.navbar-collapse {
    max-height: 150px;
}

Таким образом у вас будет хорошая полоса прокрутки для вашего меню.

Вы можете изменить max-height в зависимости от размера window, используя событие resize в JS.

Ответ 5

Измените navbar-fixed-top на navbar-static-top.

Ответ 6

1-я версия. Установка padding-top на две константы

  • Требуется заполнение кузова, когда вы используете навигационную панель с классом .navbar-fixed-top:

    Фиксированный навигатор наложит ваше другое содержимое, если вы не добавите дополнение к вершине <body>.

    По умолчанию навигационная панель имеет высоту 50 пикселей.

    Обязательно включите это после основного Bootstrap CSS.

  • Свернуть события помочь изменить значение свойства padding-top:

    show.bs.collapse срабатывает сразу же после вызова метода экземпляра show.

    hide.bs.collapse запускается сразу же после вызова метода hide.

  • Вы можете скопировать transition свойства из класса .collapsing.

  • Пользователь может увеличить ширину окна, пока меню остается расширенным. В этом случае необходимо уменьшить свойство padding-top для body. Например, с помощью медиа-запроса и !important.

Итак, давайте определим значение padding-top, используя две константы - 50px и 235px.

var selectBody = $('body');

/* 2. */
$('.navbar-collapse').on('show.bs.collapse', function () {
  selectBody.css('padding-top', '235px');
})
$('.navbar-collapse').on('hide.bs.collapse', function () {
  selectBody.css('padding-top', '50px');
})
@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
  /* 1. */
  padding-top: 50px;

  /* 3. */
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: padding-top;
       -o-transition-property: padding-top;
          transition-property: padding-top;
}

/* 4. */
@media (min-width: 768px) {
  body {
    padding-top: 50px !important;
  }
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">Brand</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Left 1</a></li>
                <li><a href="#">Left 2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Right 1</a></li>
                <li><a href="#">Right 2</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
  <h1>Header 1</h1><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h2>Header 2</h2><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
  <h3>Header 3</h3><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p><p>Paragraph.</p>
</div>

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