固定导航栏的引导程序 [英] Fixed navbar with bootstrap

问题描述

我试图在我的孩子主题中更改导航栏，但我是新手。我在这里阅读了一些关于这方面的问题，甚至看到了bootstrap网站，但我不明白如何解决我的问题。我对我的无知感到抱歉，但有人可以向我解释它是如何工作的？

我使用这个主题 http://demos.codexcoder.com/#limo_wp ，我想修复导航栏而不是眨眼和浮动。滚动页面后请保持不动。

解决方案

你可以在bootstrap网站上找到一个例子。

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

或者您可以更改

 < section id =headnevclass =navbar topnavbar> 
  

至

 < section id =headnevclass =navbar navbar-fixed-top> 
  

放入您的头文件并删除：

<$ （窗口）.scrollTop（）函数返回顶部导航菜单的脚本
jQuery（window）.bind（'scroll'，function（）{
if > 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

I'm trying to change the navbar in my child theme but I'm a newbie. I read some questions here about that and even saw the bootstrap site, but I don't understand how to solve my problem. I'm sorry for my ignorance but could someone explain to me how it works?

I'm using this theme http://demos.codexcoder.com/#limo_wp and I would like to fixed the navbar instead of this "blink" and float. Just stay fixed after scroll the page.

解决方案

You can find an example on the bootstrap website.

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

Or you can change

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

to

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

in your header file and remove:

// 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');
      }
    });

from custom.js

这篇关于固定导航栏的引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！