logo标签列表

固定导航栏与Bootstrap

htmlcsswordpresstwitter-bootstrapnavbar
3
我正在尝试更改我的子主题中的导航栏，但我是个新手。我在这里阅读了一些相关问题，甚至看了Bootstrap网站，但我不知道如何解决我的问题。抱歉我的无知，但有人能向我解释一下如何做吗？
我正在使用这个主题：http://demos.codexcoder.com/#limo_wp，我想要固定导航栏，而不是“闪烁”和漂浮。滚动页面后保持固定。
6个回答
4
您可以在Bootstrap网站上找到一个示例。 http://getbootstrap.com/examples/navbar-fixed-top/ 或者您可以更改。
<section id="headnev" class="navbar topnavbar">

to

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

这个解决方案完全从你的主题中移除了不需要的功能，那为什么它没有被标记为答案呢？ - Chris Mackie
3
以下命令：

固定在顶部： 添加.navbar-fixed-top，并包含.container或.container-fluid以使导航栏内容居中和填充。

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

如果你想在滚动页面后固定菜单，可以使用以下 JavaScript 代码。在这段代码中，菜单会在滚动到特定元素后固定。我根据你的模板编写了以下代码。
<script>
    if ( $('body').scrollTop() > $('.section-a').position.top ) {
         $('#headnev').removeClass('topnavbar');
         $('#headnev').addClass('navbar-fixed-top');
     }
</script>
嗨，@AHIR！我最近注意到，一旦我完成了我的目标，但当我选择可视化的移动版本时，菜单无法工作。有任何想法为什么会发生这种情况吗？ - U23r
嗨 @U23r，你在主题中调用了dropdown.js吗？ - user2598812
这个调用应该在我的header.php中，对吗？如果是的话，那么不是。它没有调用任何dropdown.js。 当我在移动版本上点击菜单时，什么也没发生。就像按钮被禁用了一样。 - U23r
@U23r 你应该在页眉或页脚中先调用 jquery-*.js，然后再调用 dropdown.js。 - user2598812
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个是下拉菜单。
问候 :)
此处应该添加一个 margin-top 到你的导航栏高度的主体上，还是你的容器上，这是我不确定的事情。 - Spasal
3
你也可以尝试我的CSS，如果你总是想把它定位在顶部，那么这个简单而有效。最初的回答。
.navbar{
    position:fixed;
    width:100%;
    z-index: 1000000;
    top:0;
}
2

如果您想覆盖父主题中的这种行为，您需要在子主题中添加类似以下的CSS代码。

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

如果您对WordPress子主题不熟悉，这里 是一个不错的资源。甚至可能会有一个主题设置来实现这一功能，具体取决于主题开发者在主题选项中提供了什么。

它不能工作，但感谢尝试。@AHIR 的解决方案效果很好。 - U23r
你试过了吗？我在检查元素中测试了一下，根据我对你所描述的内容的理解，它可以正常工作。也许你的描述不够清晰。“Blink”并不是UI行为的一个很好的描述。 - Opaw Nako
2
在导航栏
中，你需要添加类名称.navbar-fixed-top。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接