wp-bootstrap-nav walker collapse is not working on ipad

Bootstrap navbar collapse is not working. The issue is that it shows a collapsing menu but on click, it is not collapsed. I have provided my full code so that it can help you to suggest or help me to sort out the issue

<header class=”head-image”>
<nav id=”nav-top” class=”navbar hidden-xs hidden-sm” style=”margin-bottom: 0px;”>
<div class=”container text-center”>
<div class=”col-md-4 col-md-offset-8″>
<div class=”search-box”>
<?php echo do_shortcode(‘[smart_search id=”1″]’); ?>
</div>
</div>
</div>
</nav>
<section id=”main-header”>
<div class=”container”>
<div class=”pull-left”>
<a href=”<?php echo esc_url(home_url(‘/’)); ?>” title=”<?php echo esc_attr(get_bloginfo(‘name’, ‘display’)); ?>” rel=”home”>
<img src=”<?php header_image(); ?>” width=”213″ height=”117″ alt=””>
</a>
</div>

<div class=”pull-right hidden-xs hidden-sm”>
<div class=”row text-right”>
<div class=”col-xs-12″>
<span class=”text-white”>Order hotline</span>
</div>
<div class=”col-xs-12″>
<span class=”nav-phone”>
<i class=”fa fa-phone” aria-hidden=”true”></i>
<a class=”text-white nav-phone” href=”tel:+”></a>
</span>
</div>
</div>
<div class=”row n-m hidden-xs hidden-sm”>
<div class=”col-sm-6 col-xs-12 border-brown relative”>
<a href=”<?php echo get_permalink(get_option(‘woocommerce_myaccount_page_id’)); ?>” class=”cover-href”></a>
<div class=”col-xs-3″>
<i class=”fa fa-user” aria-hidden=”true”></i>
</div>
<div class=”col-xs-9″>

<div class=”row”>
<a href=”<?php echo get_permalink(get_option(‘woocommerce_myaccount_page_id’)); ?>” class=”text-white”>Login/Register</a> </div>

<div class=”row “>
<span class=”text-white”>
My Account
</span>
</div>
</div>
</div>
<div class=”col-sm-5 col-xs-12 border-brown relative”>
<a href=”<?php echo wc_get_cart_url(); ?>” class=”cover-href”></a>

<div class=”col-xs-3″>
<a href=”<?php echo wc_get_cart_url(); ?>”>
<i class=”fa fa-shopping-bag” aria-hidden=”true”></i>
</a>
</div>
<div class=”col-xs-9″>
<div class=”row”>
<a href=”<?php echo wc_get_cart_url(); ?>” class=”text-white”>Shopping bag</a>
</div>
<div class=”row”>
<span class=”text-white”>
<?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class=”price”>(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

</section>
<nav class=”navbar” id=”main-menu”>
<div class=”container”>
<div class=”navbar-header hidden-md hidden-lg”>
<div class=”col-xs-6″>
<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>
<span class=”text-white hidden-lg hidden-md” data-toggle=”collapse” data-target=”#main-menu-collapse”>Menu</span>
</div>

<div class=”col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative”>
<a href=”<?php echo wc_get_cart_url(); ?>” class=”cover-href”></a>
<div class=”row”>
<div class=”col-xs-4″>
<i class=”fa fa-shopping-bag” aria-hidden=”true”></i>
</div>
<div class=”col-xs-8 text-white”>
<span class=”text-white”>
<?php echo WC()->cart->get_cart_contents_count(); ?> Items
<span class=”text-white”>
(<?php echo WC()->cart->get_cart_total(); ?>)
</span>
</span>
</div>
</div>

</div>
</div>

<div id=”main-menu-collapse” class=”collapse navbar-collapse”>

<?php
wp_nav_menu(array(
‘theme_location’ => ‘primary’,
‘depth’ => 2,
‘container’ => ‘div’,
‘menu_class’ => ‘nav navbar-nav’,
‘fallback_cb’ => ‘WP_Bootstrap_Navwalker::fallback’,
‘walker’ => new WP_Bootstrap_Navwalker(),
));
?>

<div class=”row border-top hidden-lg hidden-md”>
<div class=”col-xs-3″>
<a href=”contact_us” class=”text-white”>Contact</a>
</div>
<div class=”col-xs-9″>
<a href=”tel:”>
<i class=”fa fa-phone” aria-hidden=”true”></i>
<span class=”text-white”></span>
</a>

</div>
</div>
<div class=”row border-top hidden-lg hidden-md”>
<div class=”col-xs-3″>
<a href=”<?php echo get_permalink(get_option(‘woocommerce_myaccount_page_id’)); ?>” class=”text-white”>Login/ register</a>
</div>
<div class=”col-xs-9″>
<a href=”<?php echo get_permalink(get_option(‘woocommerce_myaccount_page_id’)); ?>”>
<i class=”fa fa-user” aria-hidden=”true”></i>
<span class=”text-white”>My account</span>
</a>

</div>
</div>
</div>
</div>
</nav>
<nav class=”navbar” id=”menu-shortcut”>
<div class=”container”>
<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>
<div class=”collapse navbar-collapse”>
<ul class=”nav navbar-nav col-lg-12 text-center”>
<li class=”col-lg-4 col-md-4 text-left”><a href=””>text</a></li>
<li class=”col-lg-4 col-md-4″><a href=””>text</a></li>
<li class=”col-lg-4 col-md-4 text-right”><a class=”toggle-modal” href=”javascript:void(0);”>Sign up </a></li>

</ul>

</div>
</div>
</nav>
</header>

I am also using Jquery the code is below, there is no jquery conflict in my code everything working perfectly only getting the issue when I am browsing form iPad

$(‘#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button’).click(function()
{

if($(this).children(‘button’).attr(‘class’) == “navbar-toggle collapsed”)
{
$(this).parents(‘.container’).children(‘#main-menu-collapse’).addClass(‘in’);
$(this).parents(‘.container’).children(‘#main-menu-collapse’).slideDown(‘fast’, function() {

});
$(this).children(‘button’).html(“”);

$(this).children(‘button’).css({

‘min-width’ : ’44px’,
‘min-height’ : ’34px’

});
$(this).children(‘button’).attr(‘aria-expanded’, ‘true’);
$(this).children(‘button’).removeClass(‘collapsed’);

}else
{
$(this).children(‘button’).addClass(‘collapsed’);
$(this).parents(‘.container’).children(‘#main-menu-collapse’).slideDown(‘fast’, function() {

});
$(this).parents(‘.container’).children(‘#main-menu-collapse’).css(‘display’, ‘none’);
$(this).children(‘button’).attr(‘aria-expanded’, ‘false’);
$(this).parents(‘.container’).children(‘#main-menu-collapse’).removeClass(‘in’);
$(this).children(‘button’).css({
“margin-top” : “11px”,
‘background’ : ‘none’
});
$(this).children(‘button’).html(‘<span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span>’);
}
});

Read more here:: wp-bootstrap-nav walker collapse is not working on ipad

Leave a Reply

Your email address will not be published. Required fields are marked *