smoothState.js按钮分层问题

Question

我已经建立了一个响应站点，该站点使用JQuery在电话/小屏幕上显示“ MENU”按钮。在添加smoothState.js（我喜欢，顺便说一句）之前，它可以正常工作，在页面中任何其他层的顶部显示按钮和后续菜单。您可以在这里查看此版本（ pre smoothState.js）：marsinc.com clean

但是，在添加smoothState.js之后，菜单按钮以某种方式被重新排序为位于正文和页脚区域下方，这使得查找或单击/触摸变得困难。您可以在此处查看（ with smoothState.js）版本：marsinc.com with smoothstate.js

我试图强行应用某些z-index设置，但这不起作用。我不确定如何解决此问题。

这是菜单按钮的JQuery代码，它位于“ navigation.js”脚本中：

( function( $ ) {
    var container, button, menu, links, subMenus;

    container = document.getElementById( 'site-navigation' );
    if ( ! container ) {
        return;
    }

    button = container.getElementsByTagName( 'button' )[0];
    if ( 'undefined' === typeof button ) {
        return;
    }

    menu = container.getElementsByTagName( 'ul' )[0];

    // Hide menu toggle button if menu is empty and return early.
    if ( 'undefined' === typeof menu ) {
        button.style.display = 'none';
        return;
    }

    menu.setAttribute( 'aria-expanded', 'false' );
    if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
        menu.className += ' nav-menu';
    }

    button.onclick = function() {
        if ( -1 !== container.className.indexOf( 'toggled' ) ) {
            container.className = container.className.replace( ' toggled', '' );
            button.setAttribute( 'aria-expanded', 'false' );
            menu.setAttribute( 'aria-expanded', 'false' );
        } else {
            container.className += ' toggled';
            button.setAttribute( 'aria-expanded', 'true' );
            menu.setAttribute( 'aria-expanded', 'true' );
        }
    };

    // Get all the link elements within the menu.
    links    = menu.getElementsByTagName( 'a' );
    subMenus = menu.getElementsByTagName( 'ul' );

    // Set menu items with submenus to aria-haspopup="true".
    for ( var i = 0, len = subMenus.length; i < len; i++ ) {
        subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
    }

    // Each time a menu link is focused or blurred, toggle focus.
    for ( i = 0, len = links.length; i < len; i++ ) {
        links[i].addEventListener( 'focus', toggleFocus, true );
        links[i].addEventListener( 'blur', toggleFocus, true );
    }

    /**
     * Sets or removes .focus class on an element.
     */
    function toggleFocus() {
        var self = this;

        // Move up through the ancestors of the current link until we hit .nav-menu.
        while ( -1 === self.className.indexOf( 'nav-menu' ) ) {

            // On li elements toggle the class .focus.
            if ( 'li' === self.tagName.toLowerCase() ) {
                if ( -1 !== self.className.indexOf( 'focus' ) ) {
                    self.className = self.className.replace( ' focus', '' );
                } else {
                    self.className += ' focus';
                }
            }

            self = self.parentElement;
        }
    }

    function initMainNavigation( container ) {
        // Add dropdown toggle that display child menu items.
        container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false"><span class="screen-reader-text">' + 'Expand child menu' + '</span></button>' );

        container.find( '.dropdown-toggle' ).click( function( e ) {
            var _this = $( this );
            e.preventDefault();
            _this.toggleClass( 'toggle-on' );
            _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
            _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
            _this.html( _this.html() === '<span class="screen-reader-text">Expand child menu</span>' ? '<span class="screen-reader-text">Collapse child menu</span>' : '<span class="screen-reader-text">Expand child menu</span>' );
        } );
    }
    initMainNavigation( $( '.main-navigation' ) );

    // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
    $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
        if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
            initMainNavigation( params.newContainer );

            // Re-sync expanded states from oldContainer.
            params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
                var containerId = $( this ).parent().prop( 'id' );
                $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
            });
        }
    });

    // Hide/show toggle button on scroll

    var position, direction, previous;

    $(window).scroll(function(){
        if( $(this).scrollTop() >= position ){
            direction = 'down';
            if(direction !== previous){
                $('.menu-toggle').addClass('hide');

                previous = direction;
            }
        } else {
            direction = 'up';
            if(direction !== previous){
                $('.menu-toggle').removeClass('hide');

                previous = direction;
            }
        }
        position = $(this).scrollTop();
    });} ( jQuery ));

我非常感谢任何可以帮助我解决此问题的信息。谢谢！

帕利