Sticky menu not working after move to WordPress

I’m trying to move my website to WordPress, but I can’t get my sticky menu to work. I’m using a slightly modified version of this, just with an image added that appears as the user scrolls. Here is what it looks like in my HTML version: JS Fiddle (you may have to extend the window to make the image in the logo show up and disappear as you’re scrolling). In my HTMl version, I just include a scroller anchor and some javascript right in my index.html, and it works fine, but nothing happens in WordPress – the menu does not stick, and the image always shows up instead of staying hidden until I start scrolling.

For my WordPress site, I placed the scroller anchor and scroller div around the menu in my header.php:

    <div class="scroller_anchor"></div>
        <div class="scroller">   
            <nav role="navigation">
                <div class="navbar navbar-static-top navbar-default">
                    <div class="container">
                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php bloginfo('template_url')?>/images/logo8.png" class="img-responsive navlogo" alt="Verbi Ad Astra"></a>
                        </div>

                        <div class="navbar-collapse collapse navbar-responsive-collapse">
                            <?php
                            $args = array(
                                    'theme_location' => 'primary',
                                    'depth'      => 2,
                                    'container'  => false,
                                    'menu_class'     => 'nav navbar-nav navbar-center',
                                    'walker'     => new WP_Bootstrap_Navwalker()
                                    );

                            if (has_nav_menu('primary')) {
                                    wp_nav_menu($args);
                            }
                            ?>
                        </div>
                    </div> <!-- container -->
                </div> <!-- navbar -->          
            </nav>    
        </div>  <!-- scroller -->

I also added the styles to style.css and put my javascript into a separate file, which I enqueue at the end of functions.php with this code:

function add_stickymenu() {
   wp_enqueue_script( 'stickymenu', get_stylesheet_directory_uri() . '/js/stickymenu.js', array( 'jquery' ), true ); }

add_action( 'wp_enqueue_scripts', 'add_stickymenu' );

The stickymenu.js shows up in the header, but do I still need to somehow activate it? What am I doing wrong?

Read more here: Sticky menu not working after move to WordPress

Leave a Reply

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