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

by Kanon Chowdhury   Last Updated October 06, 2018 13:08 PM

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>');
    }
});


Related Questions


Walker or wp_get_nav_menu_items VS jQuery

Updated April 29, 2017 02:08 AM




Custom menu markup with Walker classes

Updated April 20, 2015 00:03 AM