Question

我正在使用Twitter Bootstrap，我希望菜单在滚动时粘在浏览器的顶部。导航栏首先到达浏览器的顶部，但滚动时会滚动它。我正在使用twitter bootstrap中的菜单的标准设置

<nav class="navbar navbar-fixed-top" id="navbar" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand animated fadeInDown" href="<?php bloginfo('url'); ?>">
                <img class="center brand-logo" style="margin-top: 18px;" height="30px" src="<?php bloginfo('template_directory'); ?>/img/Triday-fat.png" alt="Loggan för Triday, designade hemsidor till ett lågt pris"/>
            </a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <ul class="nav navbar-nav">
            <?php
                wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
          </ul>
    </div> <!--  /. container-fluid-->
</nav>

并且css是标准引导程序但是当它不起作用时我试图添加

.navbar { position: fixed; width: 100%; height: 60px; top: 0; }

如果有人能帮助我弄清楚我做错了什么，我将感激不尽！

Answer 1

这就是拥有固定到顶部导航栏所需的全部内容：

<header class="navbar navbar-default navbar-fixed-top " id="top" role="banner">


</header>

尝试here一个bootply。 Here就是文档。

Answer 2

对于那些和我有同样问题的人，我找到了解决方案！问题是我在标签上使用了animate.css效果，它以某种方式禁用了它的子节点上的固定位置......当效果被移除时，固定位置工作！感谢帮助我的人们！

Answer 3

添加顶部：0px;

这可能会解决。

Answer 4

在我的情况下，它是一个z指数：1000;这是我在nav.navbar-fixed-top所在的div＃header上应用的。

当我删除z-index时，我的菜单移动顺利。

Answer 5

如果您正在使用 animate.css ，请将

position: fixed !important;

添加到

navbar-fixed-top

它有效..

固定到顶部导航栏无法正常工作

5 个答案: