Wordpress Boostrap NavMenu on mobile hides after displaying - wordpress

Question

Here is my code, the overall design will get an improvement soon enough. Just currently getting it functional.
Anyway the issue is when on a mobile phone and you click on the navbar toggle button, then menu shows and disappears instantly.
<div class="header-main white">
<div class="container-fluid">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Mission Curling">
</div>
<div class="responsive-logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/mcc-logo.png" alt="Mission Curling">
</div>
<div class="main-menu">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#"></a>
</div>
<div class="navbar-collapse collapse" id="bs-navbar-collapse">
<ul class="nav navbar-nav list-inline">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-navbar-collapse',
'menu_class' => 'nav navbar-nav list-inline sub-menu normal-sub',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</nav>
</div>
</div>
</div>
Though better yet here is a link to the website that I am having the issue on. Curling Website I am in the midst of building them a new wordpress site.
From what I can find is this becomes active after the toggle is clicked.
.collapse {
display: none;
visibility: hidden;
}
So manually if I change that visibility then it works fine. Anything obvious stick out?

Answer 1

in mobile layout when the menu button clicked it is adding "show" class in "navbar-collapse collapse" so the visibility hidden property of collapse is remaining as it is. to solve this either you can add visibility : visible property in show class or you can remove the visibility : hidden property from collapse class because show class is overwriting the display property of collapse so it will work fine without visibility property..
Just try overriding your bootstrap property.
.collapse {
display: none;
visibility: visible !important;
}