使用引导程序修复导航栏

Posted 2023-03-05

【中文标题】使用引导程序修复导航栏

【英文标题】：Fixed navbar with bootstrap

【发布时间】：2015-06-24 17:30:02

【问题描述】：

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

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

【参考方案1】：

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

#header .navbar 
    animation:none !important;

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

【讨论】：

它不起作用，但感谢您的尝试。 @AHIR 的解决方案效果很好。

你试过了吗？我在检查元素中对其进行了测试，根据我对您所描述内容的理解，它运行良好。可能你的描述不够清楚。 “眨眼”并不是对 UI 行为的很好描述。

【参考方案2】：

您可以在 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

【讨论】：

此解决方案完全从您的主题中删除了不需要的功能，那么为什么不将其作为市场的答案呢？

【参考方案3】：

以下命令：

Fixed to top: 添加.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 你在你的主题中调用了 dropdown.js 吗？

这个调用会在我的 header.php 中，对吧？如果是，那么，不是。它没有调用任何 dropdown.js 当我单击移动版本的菜单时，它什么也不做。就像按钮被禁用之类的。

@U23r 您应该在页眉或页脚中的jquery-*.js 之后调用dropdown.js。

【参考方案4】：

在navbardiv中，应添加类名.navbar-fixed-top。

【参考方案5】：

只需添加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>

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

你好 :)

【讨论】：

您是否应该在导航栏高度的主体或容器上添加一个边距顶部，这是我不确定的事情

【参考方案6】：

你也可以试试我的css，如果你总是将它定位在顶部，那么简单而有效

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