Как исправить компоновку рельефа с длинным фиксированным навигатором?

У меня есть загрузочный макет 3.x с фиксированным навигатором. Если меню слишком длинное, заголовок (заголовок страницы класса) не отображается, потому что меню слишком высока. См print screen Как исправить компоновку рельефа с длинным фиксированным навигатором?

<body>  
    <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#">Project name</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li>    
      <li><a href="#contact">Test #1</a></li> 
      <li><a href="#contact">Test #2</a></li> 
      <li><a href="#contact">Test #3</a></li> 
      <li><a href="#contact">Test #4</a></li> 
      <li><a href="#contact">Test #5</a></li> 
      <li><a href="#contact">Test #6</a></li> 
      <li><a href="#contact">Test #7</a></li> 
      <li><a href="#contact">Test #8</a></li> 
      <li><a href="#contact">Test #9</a></li> 
     </ul> 
     </div>   
    </div> 
    </nav> 
    <div class="container"> 
    <div class="page-header"> 
     <h1>Sticky footer with fixed navbar</h1> 
    </div> 
    <p class="lead">Test</p> 
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> 
    </div>  
    <footer class="footer"> 
    <div class="container"> 
     <p class="text-muted">Place sticky footer content here.</p> 
    </div> 
    </footer> 
</body>

Пожалуйста, смотрите пример: jsfiddle Я не знаю, как долго будет меню (это код, генерируемый и зависит от прав пользователя). Мне нужно только в том случае, если меню будет слишком высоким, содержимое должно опускаться.

источник

2016-01-11 lukaszp

У меня есть решение этой проблемы. Вы можете сделать это на jquery. Ниже код

var nav_height = $('.navbar-fixed-top').height(); 
$('body').css('padding-top',nav_height);

проверка живой демо на jsfiddle

источник

2016-01-11 13:31:33

Действительно хороший трюк! Я буду включать этот код в функцию с именем resizeToNavbar и запустить этот код после загрузки страницы и изменить размер окна '$ (window) .resize (function() { resizeToNavbar(); });' – lukaszp

Да, вы одобряете мой ответ, но вы забыли проголосовать. –

После голосования я получаю сообщение: _ Спасибо за отзыв! После того, как вы заработаете в общей сложности 15 репутаций, ваши голоса изменят публикуемый публичный счет ._ Спасибо за решение! – lukaszp

Как исправить компоновку рельефа с длинным фиксированным навигатором?

ответ

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