Html 固定导航栏与引导

我试图改变我孩子主题中的导航栏，但我是个新手。我在这里读了一些关于这方面的问题，甚至看到了bootstrap网站，但我不知道如何解决我的问题。我很抱歉我的无知，但有人能给我解释一下它是如何工作的吗

---

我正在使用这个主题，我想修复导航栏，而不是这个“闪烁”和浮动。只需在滚动页面后保持固定

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

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

---

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

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

或者你可以改变

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

---

从custom.js中执行以下命令：

添加

.navbar固定顶部

，并将

.container

或

容器流体

添加到导航栏内容的中心和衬垫上

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

...

如果要在固定菜单后滚动页面。您可以使用FLOWING javascript代码。在该代码中，if滚动到特定元素后的固定菜单。我根据您的模板编写了以下代码

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

if（$（'body'）.scrollTop（）>$（'section-a'）.position.top）{
$（'headnev'）.removeClass（'topnavbar'）；
$（'#headnev'）.addClass（'navbar-fixed-top'）；
}

在

navbar

div

中，您应该添加类名

。navbar fixed top

只需添加一个

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>

这将生成带有标题（title）的导航栏 其中2个菜单项中有5个是下拉菜单项

---

问候语：）

你也可以试试我的css，如果你总是把它放在最上面的话，它既简单又有效

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

---

它不起作用，但谢谢你的尝试@亚希尔的解决方案很有效。你试过了吗？我在inspect element中对它进行了测试，根据我对您所描述内容的理解，它运行良好。也许你的描述不够清楚。“Blink”不是一个很好的UI行为描述。另外，你是否应该在导航栏的主体或容器上添加一个边距顶部，这是我不知道的，因为这个解决方案完全删除了主题中不需要的功能，所以为什么不是市场上的答案呢？嗨，@AHIR！我最近注意到，一旦我做到了这一点，我就完成了我的目标，但当我选择了可视化的移动版本时，菜单就不起作用了。你知道为什么会这样吗？嗨@U23r你在你的主题中调用了dropdown.js吗？这个调用应该在my header.php中，对吗？如果是，那么就不是。当我点击移动版的菜单时，它没有调用任何dropdown.js，它什么也不做。这就像按钮被禁用了一样。@U23r您应该在页眉或页脚中的

jquery-*.js

之后调用

dropdown.js

。

<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{
    position:fixed;
    width:100%;
    z-index: 1000000;
    top:0;
}