Working with Underscrore

I have currently working with underscore theme. I have moved the button above <nav> and it seems not working on mobile. What should i change to get it working?

<code>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        the_custom_logo();
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php
        endif;
        $earn_ds_description = get_bloginfo( 'description', 'display' );
        if ( $earn_ds_description || is_customize_preview() ) :
            ?>
            <p class="site-description"><?php echo $earn_ds_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
        <?php endif; ?>
    </div><!-- .site-branding -->

       <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'earn-ds' ); ?></button>

<nav id="site-navigation" class="main-navigation">
     
        <?php
        wp_nav_menu(
            array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
            )
        );
        ?>
    </nav><!-- #site-navigation -->
</header><!-- #masthead -->

/**

File navigation.js.
*

Handles toggling the navigation menu for small screens and enables TAB key

navigation support for dropdown menus.
*/
( function() {
const siteNavigation = document.getElementById( 'site-navigation' ); // Return early if the navigation doesn't exist.
if ( ! siteNavigation ) {
return;
} const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ]; // Return early if the button doesn't exist.
if ( 'undefined' === typeof button ) {
return;
} const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ]; // Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
button.style.display = 'none';
return;
} if ( ! menu.classList.contains( 'nav-menu' ) ) {
menu.classList.add( 'nav-menu' );
} // Toggle the .toggled class and the aria-expanded value each time the button is clicked.
button.addEventListener( 'click', function() {
siteNavigation.classList.toggle( 'toggled' ); if ( button.getAttribute( 'aria-expanded' ) === 'true' ) { button.setAttribute( 'aria-expanded', 'false' ); } else { button.setAttribute( 'aria-expanded', 'true' ); } } ); // Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
document.addEventListener( 'click', function( event ) {
const isClickInside = siteNavigation.contains( event.target ); if ( ! isClickInside ) { siteNavigation.classList.remove( 'toggled' ); button.setAttribute( 'aria-expanded', 'false' ); } } ); // Get all the link elements within the menu.
const links = menu.getElementsByTagName( 'a' ); // Get all the link elements with children within the menu.
const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ); // Toggle focus each time a menu link is focused or blurred.
for ( const link of links ) {
link.addEventListener( 'focus', toggleFocus, true );
link.addEventListener( 'blur', toggleFocus, true );
} // Toggle focus each time a menu link with children receive a touch event.
for ( const link of linksWithChildren ) {
link.addEventListener( 'touchstart', toggleFocus, false );
} /**

Sets or removes .focus class on an element.
*/
function toggleFocus() {
if ( event.type === 'focus' || event.type === 'blur' ) {
let self = this;
// Move up through the ancestors of the current link until we hit .nav-menu.
while ( ! self.classList.contains( 'nav-menu' ) ) {
// On li elements toggle the class .focus.
if ( 'li' === self.tagName.toLowerCase() ) {
self.classList.toggle( 'focus' );
}
self = self.parentNode;
}
} if ( event.type === 'touchstart' ) {
const menuItem = this.parentNode;
event.preventDefault();
for ( const link of menuItem.parentNode.children ) {
if ( menuItem !== link ) {
link.classList.remove( 'focus' );
}
}
menuItem.classList.toggle( 'focus' );
}
}
}() );

.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

• This topic was modified 2 weeks, 4 days ago by shaibustephen.
• This topic was modified 2 weeks, 4 days ago by shaibustephen.