Jump to content

mobile menu (hamburger) not showing menu items when clicked


MayraAOrtiz

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 comment
Share on other sites

  • 1 month later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.