How to target the hamburger <span> (WP Bootstrap Navwalker) in mobile view - css

Question

I want to change icon's color to white, but can't seem to target it properly. Is there any way of targeting it from the main.css, or only in HTML class with Bootstrap (and if so, how?).
HTML:
<header class="header" id="myHeader">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'your-theme-slug'); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<?php
wp_nav_menu(array(
'theme_location' => 'top-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'top-bar',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
</nav>
</div>
</header>
CSS
header .container {
height: 100%;
z-index: 10;
display: flex;
align-items: center;
position: relative;
}
header .container .top-bar {
list-style-type: none;
display: flex;
}
header .container .site-link,
.site-logo {
margin-right: auto;
}
header .top-bar li a {
/*padding: 0 2rem;*/
padding: 2.5rem 2rem 2.5rem 2rem;
color: var(--off_white);
font-size: 1.3rem;
text-decoration: none;
z-index: 1000;
}
header .top-bar li.current-menu-item a {
background: var(--secondary);
}
#media (max-width: 992px) {
/* bootstrap navwalker menu */
.navbar-toggler span {
background-color: transparent;
color: var(--off_white) !important;
border: 0;
cursor: pointer;
font-size: 2rem;
display: block;
}
}
Also, how can I expand my nav-menu after clicking the hamburger icon in mobile view, to make it fullscreen and the background blurred? The question is basically how to target it, will it work targeting .top-bar?

Answer 1

The reason this is happening is because you are using navbar-dark. Nothing wrong with this, perfectly normal and the same would be happening with navbar-light.
This might be worth a try in your CSS. !important I hope will over ride any Boostrap CSS (but only for the button color unless you add more CSS)
button .navbar-toggler{
color: white !important;
}
With your second question. If you can provide the code examples again to make it a properly formatted question I think the question might be worthy of it's own post. 1 post 1 question usually does work best.