wordpress引导程序导航导航栏自动折叠,未处于打开状态

时间:2019-05-15 17:35:01

标签: wordpress twitter-bootstrap wordpress-theming navbar wp-nav-walker

enter image description here我正在开发WordPress主题,并使用navwalker代码开发navbar, 问题是,当我单击移动设备上的菜单按钮时,它会在一毫秒内打开和关闭。它可以在localhost中正常工作,但不能在服务器中工作。

Wordpress:5.2 navwalker:Bootstrap 4的自定义WordPress nav walker类 引导程序:4.3.1 网站网址:https://www.androidinterview.com/

<header id="masthead" class="site-header has-header">
    <nav id="menu" class="navbar navbar-expand-lg  navbar-light">
        <div class="site-branding navbar-brand">
            <?php
            the_custom_logo();
            if ( is_front_page() && is_home() ) :
                ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
            else :
                ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
            endif;
            $ehsdev_description = get_bloginfo( 'description', 'display' );
            if ( $ehsdev_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $ehsdev_description; /* WPCS: xss ok. */ ?></p>
            <?php endif; ?>
        </div><!-- .site-branding -->


        <button class="navbar-toggler p-0" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>

        <?php
        wp_nav_menu([
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'container'         => 'div',
            'container_id'      => 'bs4navbar',
            'container_class'   => 'collapse navbar-collapse',
            'menu_id'           => 'false',
            'menu_class'        => 'navbar-nav ml-auto',
            'depth'             => 2,
            'fallback_cb'       => 'bs4navwalker::fallback',
            'walker'            => new bs4Navwalker()
        ]);
        ?>
    </nav>

    </header><!-- #masthead -->

function.php

require get_template_directory() . '/inc/bootstrap-wp-navwalker.php';

register_nav_menus( array(
            'primary' => esc_html__( 'Primary', 'ehsdev' ),
        ) );

2 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,我发现一个插件正在加载Bootstrap 3,而我同时也在加载BootStrap 4。 你的情况是一样的。 我可以在下图中看到您正在加载BootStrap 4.3.1 Sources on Chrome Web dev Tools

但是还有另一个插件正在加载BootStrap 3.3.4,请参见下图

Sources with bootstrap 3.3.4

就我而言,我只是从插件中删除了引导程序 或者您可以使用相同版本的BootStrap,就可以了。

答案 1 :(得分:0)

我看到您在Bootstrap v4.3.1 js中使用Bootstrap v3.3.4 css吗?

尝试将css或js文件更改为兼容版本吗?

希望有帮助

enter image description here