0

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">
        <a href="https://www.missioncurling.org"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Mission Curling"></a>
    </div>
    <div class="responsive-logo">
        <a href="https://www.missioncurling.org"><img src="<?php echo get_template_directory_uri(); ?>/img/mcc-logo.png" alt="Mission Curling"></a>
    </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?

C. Skjerdal
  • 2,750
  • 3
  • 25
  • 50

1 Answers1

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;
}
C. Skjerdal
  • 2,750
  • 3
  • 25
  • 50
Darsh khakhkhar
  • 666
  • 5
  • 15