【问题标题】:Fixed navbar with bootstrap使用引导程序修复导航栏
【发布时间】:2015-06-24 17:30:02
【问题描述】:

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

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

【问题讨论】:

    标签: html css wordpress twitter-bootstrap navbar


    【解决方案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;
      }
      
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-01-04
        • 1970-01-01
        • 2015-08-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多