如何让我的bootstrap wordpress主题导航子菜单正常工作？ > [英] How do I get my bootstrap wordpress theme navigation submenu to work correctly? >

问题描述

您好，

我正在使用wp-bootstrap-navwalker创建一个bootstrap wordpress主题。当导航菜单处于移动视图中时，子菜单会覆盖菜单而不是正确向下滑动。如何在移动视图中使此菜单正常工作？我的代码在wordpress之外工作得很好，但有些东西我没有正确地转换到我的Wordpress主题。



我尝试过：



当我在wordpress之外测试html代码时，这个引导程序导航菜单正常工作但是当我在wordpress上使用它时代码不起作用。我尝试从我的CSS中删除和更改以下代码。在bootstrap之外测试时，必须从我的css代码中删除此代码才能使其正常工作。当我尝试在wordpress上改变我的CSS时，同样的方法不起作用：

Hello,
I am creating a bootstrap wordpress theme using wp-bootstrap-navwalker. When the navigation menu is in mobile view the submenu covers up the menu instead of properly sliding down. How do I get this menu to work correctly when in mobile view? My code works great outside of wordpress but there is something I have not transposed over to my Wordpress theme correctly.

What I have tried:

This bootstrap navigation menu works correctly when I have tested the html code outside of wordpress but the code does not work when I use it on wordpress. I tried eliminating and altering the following code from my css. This code has to be eliminated from my css code when testing it outside of bootstrap in order to get it to work. That same method does not work when I tried altering my css on wordpress:

.dropdown:hover .dropdown-menu {
    display: block;
    
}

这是我的header.php代码的一部分：

Here is part of my header.php code:

   <header id="header">
        <nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                
<span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
</button>
   
</div>
        
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker())
        );
    wp_nav_menu( $mobile_nav );
        ?>
    
    </div>
</nav>

这是我的functions.php的一部分：

Here is part of my functions.php:

// Register Custom Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

//theme support
function wpb_theme_setup(){
    //nav menus
    register_nav_menus( array(
    'primary' => __( 'Primary Menu'),
) );
}

add_action('after_setup_theme', 'wpb_theme_setup');


function KWD_script_enqueue(){
    
    wp_enqueue_style('bootstrap', get_template_directory_uri() . "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
    wp_enqueue_style('customstyle', get_template_directory_uri(). '/css/template4.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri(). '/js/template4.js', array(), '1.0.0', true);
     wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}

add_action('wp_enqueue_scripts', 'KWD_script_enqueue');

推荐答案

mobile_nav） ;
？>

< / div>
< / nav>

mobile_nav ); ?> </div> </nav>

这是我的functions.php的一部分：

Here is part of my functions.php:

// Register Custom Navigation Walker
require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

//theme support
function wpb_theme_setup(){
    //nav menus
    register_nav_menus( array(
    'primary' => __( 'Primary Menu'),
) );
}

add_action('after_setup_theme', 'wpb_theme_setup');


function KWD_script_enqueue(){
    
    wp_enqueue_style('bootstrap', get_template_directory_uri() . "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
    wp_enqueue_style('customstyle', get_template_directory_uri(). '/css/template4.css', array(), '1.0.0', 'all');
    wp_enqueue_script('customjs', get_template_directory_uri(). '/js/template4.js', array(), '1.0.0', true);
     wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}

add_action('wp_enqueue_scripts', 'KWD_script_enqueue');

这篇关于如何让我的bootstrap wordpress主题导航子菜单正常工作？ &GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！