bootstrap dropdown menu doesn't work on mobile

Question

I don't know why but my dropdown menu doesn't work on mobile version. I've tried two different tutorials but I always get the same problem..

I use bootstrap + navwalker

I think this is some jQuery problem, I've tried to implement it somewhere else in my code but it didn't work anyway.

source:

    <head>
          <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-2.1.4.min.js"></script>
    </head>

  <nav class="navbar navbar-default" role="navigation"> 
  <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <?php /* Primary navigation */
      wp_nav_menu( array(
        'top_menu',
        'depth' => 2,
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        //Process nav menu using our custom nav walker
        'walker' => new wp_bootstrap_navwalker())
        );
        ?>
    </div>
  </nav>

functions.php

    <?php
    add_action( 'after_setup_theme', 'wpt_setup' );
        if ( ! function_exists( 'wpt_setup' ) ):
            function wpt_setup() {  
                register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
            } endif;


    function wpt_register_js() {
        wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
        wp_enqueue_script('jquery.bootstrap.min');
    }
    add_action( 'init', 'wpt_register_js' );
    function wpt_register_css() {
        wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
        wp_enqueue_style( 'bootstrap.min' );
    }
    add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

    // Register custom navigation walker
        require_once('wp_bootstrap_navwalker.php');
    ?>

Answer 1

the issue is cause of the facebook plugin positioning. Use the style below and it should work.

#sticky_navigation .navbar-toggle
{
 z-index: 10000;
}

bootstrap dropdown menu doesn't work on mobile

Question

1 answers

solution1
1 ACCPTED 2015-05-18 12:06:16

bootstrap dropdown menu doesn't work on mobile

Question

1 answers

solution1 1 ACCPTED 2015-05-18 12:06:16

solution1
1 ACCPTED 2015-05-18 12:06:16