Hamburger Button doesn't show dropdown

[danao-realityi]

Hello, no matter what I do, the hamburger menu doesn't drop down to reveal the collapsed menu. There are no errors showing in the console. I am using understrap 0.8.1 and understrap-child 0.5.1. understrap-child is active now.

I even compared my navbar to the understrap demo site but saw no difference between my code and on that site.

This site is local so I cannot give a url, but the navbar is showing with the correct text/links, it's only when the menu collapses is where the issue shows.

<div id="wrapper-navbar" itemscope itemtype="http://schema.org/WebSite">

  <a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">

      <?php if ( 'container' == $container ) : ?>
     <div class="container" >
      <?php endif; ?>

      <!-- Your site title as branding in the menu -->
       <?php if ( ! has_custom_logo() ) { ?>

            <?php if ( is_front_page() && is_home() ) : ?>

            <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>

        <?php else : ?>

            <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>

        <?php endif; ?>

    <?php } else {
          the_custom_logo();
    } ?><!-- end custom logo -->

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
    </button>

    <!-- The WordPress Menu goes here -->
        <?php wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'container_class' => 'navbar-collapse collapse',
                'container_id'    => 'navbarNavDropdown',
                'menu_class'      => 'navbar-nav',
                'fallback_cb'     => '',
                'menu_id'         => 'main-menu',
                'walker'          => new understrap_WP_Bootstrap_Navwalker(),
            )
        ); ?>
    <?php if ( 'container' == $container ) : ?>
        </div><!-- .container -->
    <?php endif; ?>

  </nav><!-- .site-navigation -->

</div><!-- #wrapper-navbar end -->

[axlright]

I see this happen when /src/js/bootstrap4/bootstrap.js isn't being properly compiled. Check your /js/theme.js (easier to look at the unminified version) and make sure that the contents of /src/js/bootstrap4/bootstrap.js are included - they should be right at the top.

[danao-realityi]

Should I be looking for an import statement @axlright ?

[axlright]

@danao-realityi No I'd just make sure the bootstrap.js is included. That's the first place I check when the menu isn't expanding.

[axlright]

@danao-realityi You're describing to me what sounds like a js issue, not a markup issue. If the menu icon is showing but not expanding, I don't think your header.php is an issue. You're saying there are no console errors. If the bootstrap.js isn't compiled, the site will load and when collapsed the hamburger icon will show but when clicked, the hamburger icon won't do anything but you won't get any console errors.

[danao-realityi]

@axlright I understand what you mean. I looked in the theme.js and compared it to the understrap's theme and saw no difference. I feel at this point I should just add an event listener to achieve the similar funtionality. But it's frustrating that I can't figure out the reason for this.

[axlright]

@danao-realityi Yeah that sounds really frustrating! Is everything on a local build? Even if it were public, though, not everything could be diagnosed as you mention.

I just booted up a stock understrap 0.8.1 and understrap-child 0.5.1 and the hamburger is dropping down the main nav just fine.

Just to confirm, the setup instructions are:

1) do nothing in the understrap directory 2) in the understrap-child directory, run npm install and confirm that gulp copy-assets was run 3) just for fun, check that understrap-child/src/js/bootstrap4/bootstrap.js exists and has content in it 4) run gulp styles and gulp scripts 5) just for fun, check that your understrap-child/css/child-theme.css contains the content in understrap-child/src/js/bootstrap4/bootstrap.js 6) load website, drink beer(?)

[danao-realityi]

@axlright Keeping in mind that I've already edited some php files within understrap directory before implementing the navbar, I deleted node_modules from understrap-child and started at step 2. Nothing changed.

[axlright]

@danao-realityi What's your reasoning for deleting node_modules? It's pretty critical for development.

[danao-realityi]

@axlright After I deleted node_modules, I then did npm install.

[axlright]

@danao-realityi If I were you, I'd copy the php customizations you've made into another directory and start over with a fresh install of the parent and child theme, adding in demo menu items before anything else to confirm the menu dropdown. I'm not able to duplicate the issue you're having following along with your description. If you start from the beginning with a fresh install and still see the issue with a demo menu, let me know and we'll dig further.

[danao-realityi]

@axlright I created a new local WP site in a VM, made a primary menu, and the hamburger button did work. I only installed understrap theme for this test. So it seems to me that when I customized the php file, I messed up the navbar functionality. I'm going to continue to figure out the issue but thank you for your idea and I appreciate the fast replies. :)

[danao-realityi]

@axlright I got it working locally!!!!!!!!! I saved the code in my footer.php, and tried replacing it with the understrap's footer.php code and the hamburger worked. Maybe there was a closing div missing there or something.

This was my previous footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package understrap
 */
$the_theme = wp_get_theme();
$container = get_theme_mod( 'understrap_container_type' );
?>
<?php get_sidebar( 'footerfull' ); ?>
<div class="wrapper" id="wrapper-footer">

                <footer class="site-footer" id="colophon">
                    <nav>
                        <ul>

                                <?php wp_nav_menu(array('sort_column'=>'menu_order','menu'=>'Footer menu','container'=>false,'items_wrap'=>'%3$s')); ?> 

                        </ul>
                        <span class="clear"></span>
                    </nav>
                </footer><!-- #colophon -->

</div><!-- wrapper end -->
</div><!-- #page we need this extra closing tag here -->

<?php //wp_footer(); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.flexslider-min.js"></script>

<script type="text/javascript">
    var $f = jQuery.noConflict(true);
        $f(window).load(function() {
        //   The slider being synced must be initialized first
        //   $f('#carousel').flexslider({
        //  animation: "slide",
        //  controlNav: true,
        //  animationLoop: false,
        //  slideshow: true,
        //  itemWidth: 75,
        //  itemMargin: 5,
        //  asNavFor: '#slider'
        //   });

          $f('#slider').flexslider({
            animation: "slide",
            controlNav: true,
            animationLoop: true,
            slideshow: true,
            sync: "#carousel"
          });
});
</script>
</body>
</html>

The only 2 things I thought to note are that the wp_footer(); is commented out and that the jquery.flexslider-min.js is after the jquery file. I'm going to play around with this but glad to see that it's showing up after all this.

[axlright]

Glad you got it working. You shouldn't need to call jQuery separately / again as it's enqueued by WordPress / Understrap.

And yeah, if you comment out the wp_footer(); you're cutting off all of the child-theme.min.js which contains all of bootstrap.js and not loading that would cause all of the js to not work.

It looks like the issue was caused by some customizations. I'm going to close this ticket. If you find issues directly relating to Understrap / Understrap Child, add a comment. But in general the Understrap team only looks out for these the parent / child repos and don't provide direct support for third party integrations.