Wordpress Boostrap NavMenu на мобильном телефоне скрывается после отображения

Question

Вот мой код, общий дизайн скоро улучшится. Просто сейчас он работает.

В любом случае проблема заключается в том, что когда на мобильном телефоне вы нажимаете кнопку переключения навигационной панели, меню отображается и исчезает мгновенно.

<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>

Хотя еще лучше, вот ссылка на веб-сайт, на котором у меня проблема. Веб-сайт для кёрлинга Я нахожусь в процессе создания нового сайта для WordPress.

Из того, что я могу найти, он становится активным после нажатия на переключатель.

.collapse {
    display: none;
    visibility: hidden;
}

Так что вручную, если я изменю эту видимость, тогда она будет работать нормально. Выглядит ли что-нибудь очевидное?

Answer 1

в мобильном макете при нажатии кнопки меню добавляется класс «show» в «navbar-collapse collapse», поэтому скрытое свойство видимости коллапса остается без изменений. для решения этой проблемы Либо вы можете добавить свойство visibility : visible в классе show, либо удалить свойство visibility : hidden из класса коллапса , потому что класс show перезаписывает свойство display коллапса, поэтому оно будет работать без свойства видимости ..

Просто попробуйте переопределить свойство начальной загрузки.

.collapse {
display: none;
visibility: visible !important;
}