Jump to content

mobile menu (hamburger) not showing menu items when clicked


Recommended Posts

I was able to create my menu with  Bootstrap Navwalker and it views fine on desktop. Once I view in mobile, the hamburger icon appears but with no dropdown of my menu items. I started with an HTML template website and i have most of it functioning as a Wordpress Theme site now, I'm just having issues with the navbar toggler icon. I have a feeling it's not grabbing or reading the .js commands it should do for the menu to work, but I've tried everything I could up to my knowledge and have seen 100s of youtube videos. I need help...If you need more or other information please let me know and I'll share.

To view website with mobile menu issue


**Attempt One:**

<nav class="navbar navbar-expand-md navbar-light  ml-auto" role="navigation">
                                      <div class="container">
                                        <!-- Brand and toggle get grouped for better mobile display -->
                                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
                                            <span class="navbar-toggler-icon"></span>
                                        </button>
                                        
                                            <?php
                                            wp_nav_menu( array(
                                                'theme_location'    => 'menu',
                                                'theme_location'    => 'mobile-menu',
                                                '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(),
                                                            ) 
                                            );
                                            ?>


**Attempt two:**

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  
    

    <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainnavbar" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>
    
        
    </button>
    <a class="navbar-brand" href="#"></a>
       
        <?php
        wp_nav_menu( array(
            'theme_location'    => 'menu',
            '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(),
        ) );
        ?>
    </div>
    
    
    
</nav>

Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.