Исправлена ​​навигация с bootstrap

Question

Я пытаюсь изменить navbar в своей дочерней теме, но я новичок. Я читал здесь несколько вопросов и даже видел сайт начальной загрузки, но я не понимаю, как решить мою проблему. Мне жаль мое невежество, но кто-нибудь может объяснить мне, как это работает?

Я использую эту тему http://demos.codexcoder.com/#limo_wp, и я хотел бы установить navbar вместо этого «blink» и float. Просто закрепитесь после прокрутки страницы.

Answer 1

Вы можете найти пример на веб-сайте начальной загрузки.

http://getbootstrap.com/examples/navbar-fixed-top/

Или вы можете изменить

<section id="headnev" class="navbar topnavbar"> 

к

<section id="headnev" class="navbar navbar-fixed-top"> 

в файл заголовка и удалить:

// Script for top Navigation Menu 
    jQuery(window).bind('scroll', function() { 
     if (jQuery(window).scrollTop() > 100) { 
     jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar'); 
     jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin'); 
     } else { 
     jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar'); 
     jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin'); 
     } 
    }); 

из custom.js

Answer 2

Чтобы переопределить это поведение в родительской теме, вам нужно добавить что-то вроде следующего CSS к дочерней теме.

#header .navbar { 
    animation:none !important; 
} 

Если вы не знакомы с детской темой WordPress, here является хорошим ресурсом для вас. Для этого может быть и тема. В зависимости от того, что разработчик темы предоставил в настройках темы.

Answer 3

Следующая команда:

Fixed to top: Добавить .navbar-fixed-top и включают .container или .container-fluid к центру и содержание колодки Navbar.

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     ... 
     </div> 
    </nav> 

Если вы хотите зафиксировать меню после прокрутки страницы. Вы используете fllowing javascript-код. В этом коде фиксированное меню после прокрутки над определенным элементом. Я написал следующий код на основе вашего шаблона.

<script> 
    if ($('body').scrollTop() > $('.section-a').position.top) { 
     $('#headnev').removeClass('topnavbar'); 
     $('#headnev').addClass('navbar-fixed-top'); 
    } 
</script> 

Answer 4

В navbardiv, вы должны добавить имя класса .navbar-fixed-top.

Answer 5

просто добавить класс = «нав NavBar Navbar фиксируемого-топ»

Я дам вам пример моего кода, просто использовать его и посмотреть, как это работает.

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container" id="container"> 
     <div class="navbar-header"> 

      <div class="navbar-brand"><a href="nature.html">Project Nature</a></div> 

      <button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active dropdown"> 

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Nature <b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#"><a href="#">Plants</a></a></li> 
         <li><a href="#"><a href="#">Landscapes</a></a></li> 
         <li><a href="#"><a href="#">Animals</a></a></li> 
         <li><a href="#"><a href="#">Elements</a></a></li> 
        </ul> 
       </li> 

       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Blah</a></li> 
       <li><a href="#contact" data-toggle="modal">Contact</a></li> 

       <li class="dropdown"> 

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#"><a href="#">Twitter</a></a></li> 
         <li><a href="#"><a href="#">Facebook</a></a></li> 
         <li><a href="#"><a href="#">Google+</a></a></li> 
         <li><a href="#"><a href="#">LinkedIn</a></a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 


</div> 

Это создаст Navbar с заголовком (название) 5 пунктов меню из Wich 2 выпадающие.

Greetings :)