I'm trying to make a navigation bar where the navigation is a bit transparrent and blurs the background. I have installed navwalker and tried some different ways. But I cannot wrap my head around what im doing wrong here. The bar is there but there is no text, unless I click on an invisible button, where the dropdown menu shows it. I want the bar to show the bar with text normally on teh computer and just the button when its on mobile
<header class="site-header sticky-top py-1">
<nav class="container d-flex flex-column flex-md-row justify-content-between">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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><span class="sr-only"></span>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</nav>
</header>
Style
.site-header {
background-color: rgba(0, 0, 0, .85);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
color: #8e8e8e;
transition: color .15s ease-in-out;
}
.site-header a:hover {
color: #fff;
text-decoration: none;
}
I have tried different ways of building it but have not come up with anything. I have not tried wordpress until recently.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…