在 Bootstrap 4 WordPress 主题中使用 X(关闭)作为导航栏切换器图标?

Question

我正在尝试使切换器(汉堡包(图标变成X。 我关注了另一个线程如何在引导 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相对较新。 您会注意到导航栏折叠被注释掉了，那是因为它会立即关闭导航。这本身就是一个问题。这是使用BootStrap和UnderScores的wp-bootstrap-starter主题的子WordPress主题。任何帮助将不胜感激！

Answer 1

它是CSS，它应该是：

.navbar-toggler>.close {
display: inline;
}
.navbar-toggler.collapsed>.close, 
.navbar-toggler:not(.collapsed)>.navbar-toggler-icon {
display: none;
}