Title: Working with Underscrore
Last modified: May 23, 2026

---

# Working with Underscrore

 *  [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * (@shaibustephen)
 * [2 weeks, 5 days ago](https://wordpress.org/support/topic/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>
 *     ```wp-block-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 -->
       ```
   
 *     ```wp-block-code
       /**File navigation.js.*Handles toggling the navigation menu for small screens and enables TAB keynavigation 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' );}}}() );
       ```
   
 *     ```wp-block-code
       .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, 5 days ago by [shaibustephen](https://wordpress.org/support/users/shaibustephen/).
    -  This topic was modified 2 weeks, 5 days ago by [shaibustephen](https://wordpress.org/support/users/shaibustephen/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Moderator [threadi](https://wordpress.org/support/users/threadi/)
 * (@threadi)
 * [2 weeks, 5 days ago](https://wordpress.org/support/topic/working-with-underscrore/#post-18917060)
 * The theme Underscore is neither being developed further nor supported anywhere.
   See its repository: [https://github.com/automattic/_s](https://github.com/automattic/_s)
 * It’s therefore quite difficult to understand your question. You can’t just download
   the theme and see your customizations there. We might be able to help if you 
   provide a link to your website so we can see what the issue is directly in the
   browser.
 *  Thread Starter [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * (@shaibustephen)
 * [2 weeks, 5 days ago](https://wordpress.org/support/topic/working-with-underscrore/#post-18917241)
 * The button of the underscore was within the opening and closing of nav class.
   To customise it, I move the button outside the opening and closing of nav. The
   issue now is that it does not toggle anymore. That was why I copied and pasted
   the complete code, the css and jQuery for guidance on what to apply to get toggle
   on mobile device size

Viewing 2 replies - 1 through 2 (of 2 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fworking-with-underscrore%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [shaibustephen](https://wordpress.org/support/users/shaibustephen/)
 * Last activity: [2 weeks, 5 days ago](https://wordpress.org/support/topic/working-with-underscrore/#post-18917241)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics