Question

我正在尝试更改子主题中的导航栏，但我是新手。我在这里阅读了一些问题，甚至看到了引导网站，但我不明白如何解决我的问题。对不起我很抱歉，有人可以向我解释它是如何运作的吗？

我正在使用这个主题http://demos.codexcoder.com/#limo_wp，我想修复导航栏而不是这个“闪烁”并浮动。滚动页面后保持固定。

Answer 1

您可以在bootstrap网站上找到一个示例。

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

以下命令：

Fixed to top: 添加.navbar-fixed-top并添加.container或.container-fluid以固定和填充导航栏内容。

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

只需添加一个class =“nav navbar navbar-fixed-top”

我会举例说明我的代码，只需使用它，看看它是如何工作的。

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

这将生成一个带标题的导航栏（标题） 5个菜单项2下拉。

问候：）

Answer 4

您需要在子主题中添加类似以下CSS的内容，以覆盖父主题中的此行为。

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

如果您不熟悉WordPress子主题，here是一个很好的资源。甚至可能有一个主题设置。取决于主题开发人员在主题选项中提供的内容。

Answer 5

在navbar div中，您应该添加班级名称.navbar-fixed-top。

Answer 6

您也可以尝试使用我的CSS，简单却有效，如果您始终将其放在顶部

.navbar{
    position:fixed;
    width:100%;
    z-index: 1000000;
    top:0;
}

修复了带引导程序的导航栏

6 个答案: