我想在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(),
最合适的回答,由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索引。只是为了澄清这一点。