使用wp-boostrap-navwalker时,导航栏隐藏在旋转木马后面

时间:2019-07-08 作者:SaintCore

我想在wordpress中的旋转木马上显示导航栏。为了实现这一点,我使用WP Bootstrap Navwalker(https://github.com/wp-bootstrap/wp-bootstrap-navwalker)

如果没有WP Bootstrap Navwalker,一切都会正常工作,除了子菜单不会因为id和类设置不正确而崩溃之外。要自动设置类和id,我想使用wp bootstrap navwalker。当我集成它时,导航栏隐藏在旋转木马后面。我可以清楚地看到导航栏就在那里,它就藏在旋转木马后面。我已经花了几个小时来研究这个代码片段,但没有成功。谁能解释一下我做错了什么?我想我错过了一些重要的东西(我对bootstrap很陌生)

CSS:

.navbar {
   padding: 0px;
   top: 0;
   z-index: 10;
}

.navbar-wrapper {
   position:absolute;
}

.carousel-inner {
   overflow: hidden;
}

.carousel-inner > .carousel-item > img{
   margin:auto;
   width:100%
}
HTML/PHP:

        <div class="container-fluid">
        <div class="navbar-wrapper">
            <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- The WordPress Primary Menu -->
                <?php wp_nav_menu(
                    array(
                        \'theme_location\'    => \'header-menu-left\',
                        \'dept\'              => 2,
                        \'menu_class\'        => \'navbar-nav justify-content-end\',
                        \'container_class\'  => \'collapse navbar-collapse\',
                        \'container_id\'    => \'navbarNav\',
                        \'fallback_cb\'     => \'WP_Bootstrap_Navwalker::fallback\',
                         \'walker\'         => new WP_Bootstrap_Navwalker(), 

                    )
                ); ?>
            </nav>
        </div>
        <div class="row">
            <div class="col">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <?php $slider = get_posts(array(\'post_type\' => \'slider\', \'posts_per_page\' => 5)); ?>
                        <?php $count = 0; ?>
                        <?php foreach($slider as $slide): ?>
                        <div class="carousel-item <?php echo ($count == 0) ? \'active\' : \'\'; ?>">
                            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="img-responsive"/>
                        </div>
                        <?php $count++; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
注意:如果删除下面的代码(以及functions.php中wp bootstrap navwalker.php类所需的\\u once语句),它会在转盘上显示导航栏。

\'fallback_cb\'     => \'WP_Bootstrap_Navwalker::fallback\',
\'walker\'          => new WP_Bootstrap_Navwalker(), 

1 个回复
最合适的回答,由SO网友:SaintCore 整理而成

我自己想出来的。z索引设置在错误的元素上。向container\\u class属性添加新类:

<?php wp_nav_menu(
                array(
                    \'theme_location\'    => \'header-menu-left\',
                    \'dept\'              => 2,
                    \'menu_class\'        => \'navbar-nav justify-content-end\',
                    \'container_class\'  => \'collapse navbar-collapse YOURCLASS\',
                    \'container_id\'    => \'navbarNav\',
                    \'fallback_cb\'     => \'WP_Bootstrap_Navwalker::fallback\',
                     \'walker\'         => new WP_Bootstrap_Navwalker(), 

                )
            ); ?>
并更改css:

.YOURCLASS {
  padding: 0px;
  top: 0;
  z-index: 10;
}
注意:在这些更改之前,z索引是在导航栏本身上设置的。要使其正常工作,必须在导航栏中的容器上设置z索引。只是为了澄清这一点。