移动设备上的 Wordpress Bootstrap 导航菜单在显示后隐藏

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>

虽然更好的是这里有一个指向我遇到问题的网站的链接。 Curling Website我正在为他们建立一个新的 wordpress 网站。

据我所知，点击切换后它会变为活动状态。

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

因此，如果我手动更改该可见性，则它可以正常工作。有什么明显的突出吗？

Answer 1

在移动布局中当点击菜单按钮时，它会在“navbar-collapse collapse”中添加“show”类，因此collapse的可见性隐藏属性保持不变。解决这个问题您可以在 show 类中添加 visibility : visible 属性，也可以从 collapse 类中删除 visibility : hidden 属性，因为 show 类正在覆盖 collapse 的显示属性，所以它可以在没有可见性属性的情况下正常工作..

只需尝试覆盖您的引导属性。

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