在Bootstrap 4 WordPress主题中使用X(关闭)表示导航栏-切换器-图标？
在Bootstrap 4 WordPress主题中使用X(关闭)表示导航栏-切换器-图标？
提问于 2017-08-19 09:25:20
我试图使切换(汉堡包)图标成为一个X。我已经遵循了另一个线程How to hide and replace navbar-toggler-icon in Bootstrap 4?，也使用了Codeply的代码，我仍然不能让图标改变。我在想其他地方出了什么问题。
这是我的导航代码：
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="navbar-brand">
<?php if ( get_theme_mod( 'wp_bootstrap_starter_logo' ) ): ?>
<a href="<?php echo esc_url( home_url( '/' )); ?>">
<img src="<?php echo esc_attr(get_theme_mod( 'wp_bootstrap_starter_logo' )); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>">
</a>
<?php else : ?>
<a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>"><?php esc_url(bloginfo('name')); ?></a>
<?php endif; ?>
<button class="navbar-toggler navbar-toggler-center collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="my-1 mx-2 close">X</span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => 'div',
'container_id' => '',
'container_class' => 'collapse navbar-collapse justify-content-end',
'menu_id' => false,
'menu_class' => 'navbar-nav',
'depth' => 3,
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
));
?>
</nav>
</div>
下面是我的CSS：
@media screen and (min-width: 200px) and (max-width: 998px){
.navbar-toggler {
display: block;
width: 100%;
float: none;
margin-right: 0;
}/*
.navbar-collapse.collapse {
display: none !important;
}*/
.navbar-header {float: none; text-align:center;}
nav.navbar-collapse.navbar-right.collapse.in {
display: block !important;
}
nav.navbar-collapse.navbar-right.collapse,
nav.navbar-collapse.navbar-right.collapse ul,
nav.navbar-collapse.navbar-right.collapse li,
nav.navbar-collapse.navbar-right.collapsing,
nav.navbar-collapse.navbar-right.collapsing ul,
nav.navbar-collapse.navbar-right.collapsing li {
width: 100%;
}
.navbar-toggler>.close {display:inline;}
.navbar-toggler.collapsed>.close,
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {display:none;}
.navbar-brand {margin:0 auto;}
#content .container {margin: 170px auto 0;}
}
我对html、css或php并不陌生，但我对BootStrap还是比较陌生的。你会注意到navbar- close被注释掉了，这是因为它会立即关闭导航。这本身就是一个问题。这是使用BootStrap和UnderScores的wp- WordPress -starter主题的子引导主题。任何帮助都将不胜感激！
回答 1
Stack Overflow用户
发布于 2018-06-02 05:24:29
它是CSS，它应该是：
.navbar-toggler>.close {
display: inline;
}
.navbar-toggler.collapsed>.close,
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
display: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45766821
复制相关文章
相似问题