移动设备上的 Wordpress Bootstrap Nav Menu 在显示后隐藏

Question

这是我的代码，整体设计很快就会得到改进。目前刚刚开始运行。

无论如何，问题出在移动设备 phone 上，您单击导航栏切换按钮，然后菜单立即显示并消失。

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

虽然更好，但这里有一个 link 到我遇到问题的网站。 Curling Website 我正在为他们建立一个新的 wordpress 网站。

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

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

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

Answer 1

在移动布局中 单击菜单按钮时，它会在 "navbar-collapse collapse" 中添加 "show" class，因此折叠的可见性隐藏属性仍然存在 解决这个问题 你可以在 show class 中添加 visibility : visible 属性或者你可以删除 visibility : hidden 属性来自 collapse class 因为 show class 正在覆盖 collapse 的显示属性所以它可以在没有可见性的情况下正常工作属性..

只需尝试覆盖您的 bootstrap 属性。

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

移动设备上的 Wordpress Bootstrap Nav Menu 在显示后隐藏

Wordpress Boostrap NavMenu on mobile hides after displaying

wordpress

twitter-bootstrap

navbar

custom-wordpress-pages

jquery-mobile-navbar