Support » Fixing WordPress » Underscores Menu not responding on mobile

  • Resolved supeherotim

    (@supeherotim)


    I’m new to creating themes and I’ve recently started work on my first Underscores theme.

    Everything seemed to be going well, but then I realized that the post pages and archive pages aren’t responding well on mobile.

    Here is the single.php code

    <?php
    /**
    * The template for displaying all single posts
    *
    * @link https://developer.wordpress.org/themes/basics/template-
    hierarchy/#single-post
    *
    * @package Elesha
    */
    
    get_header(); ?>
    
    <div id="primary" class="content-area">
    
        <main id="main" class="site-main" role="main">
    
        <?php
        while ( have_posts() ) : the_post();
    
            get_template_part( 'template-parts/content', get_post_format() );
    
            the_post_navigation();
    
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
    
        endwhile; // End of the loop.
        ?>
    
        </main><!-- #main -->
    
        <?php
        get_sidebar();
        get_footer();

    and here is the content.php code

    <?php
    /**
    * Template part for displaying posts
    *
    * @link https://codex.wordpress.org/Template_Hierarchy
    *
    * @package Elesha
    */
    
    ?>
    
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php
        if ( is_single() ) :
            the_title( '<h1 class="entry-title">', '</h1>' );
        else :
            the_title( '<h2 class="entry-title"><a href="' . esc_url( 
         get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
        endif;
    
        if ( 'post' === get_post_type() ) : ?>
        <div class="entry-meta">
            <?php elesha_posted_on(); ?>
        </div><!-- .entry-meta -->
        <?php
        endif; ?>
    </header><!-- .entry-header -->
    
    <div class="entry-content">
        <?php
            the_content( sprintf(
                /* translators: %s: Name of current post. */
                wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;
     </span>', 'elesha' ), array( 'span' => array( 'class' => array() ) ) ),
                the_title( '<span class="screen-reader-text">"', '"</span>', 
     false )
            ) );
    
            wp_link_pages( array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 
    'elesha' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->
    
    <footer class="entry-footer">
        <?php elesha_entry_footer(); ?>
    </footer><!-- .entry-footer -->

    I honestly don’t know what’s wrong here.

Viewing 15 replies - 1 through 15 (of 21 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to a page on your site where we can see this. Thanks. Also, please define “not responding well on mobile”? What isn’t happening that you expect to happen?

    Thread Starter supeherotim

    (@supeherotim)

    Hi Steve, here is the link timothycdavis.co.uk

    When you press the toggle the menu doesn’t display. It starts the animation but no menu shows.

    Thanks

    Thread Starter supeherotim

    (@supeherotim)

    Oh sorry, I’ve fixed my main question now. The menu isn’t responding though

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    works for me, though, on both my desktop and phone.

    Thread Starter supeherotim

    (@supeherotim)

    The menu is toggling properly?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Thread Starter supeherotim

    (@supeherotim)

    Yeah, it works in inspect element for me too, but not on the actual mobile device.

    It’s really confusing me

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    This may be a plugin or theme conflict. Please attempt to disable all plugins. If the problem goes away, enable them one by one to identify the source of your troubles.

    Thread Starter supeherotim

    (@supeherotim)

    Here is my header.php code

    <?php
    /**
     * The header for our theme
     *
     * This is the template that displays all of the <head> section and everything up until <div id="content">
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package Elesha
     */
    
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="page" class="site">
    	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'elesha' ); ?></a>
    
    	<header id="masthead" class="site-header" role="banner">
    		<div class="site-branding">
    			<?php
    			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;
    
    			$description = get_bloginfo( 'description', 'display' );
    			if ( $description || is_customize_preview() ) : ?>
    				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
    			<?php
    			endif; ?>
    		</div><!-- .site-branding -->
    
    		<nav id="site-navigation" class="main-navigation" role="navigation">
    			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
    			<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    	</header><!-- #masthead -->
    
    	<div id="content" class="site-content">

    Here is my navigation.js code

    /**
     * File navigation.js.
     *
     * Handles toggling the navigation menu for small screens and enables TAB key
     * navigation support for dropdown menus.
     */
    ( function() {
    	var container, button, menu, links, i, len;
    
    	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' );
    
    	// 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;
    		}
    	}
    
    	/**
    	 * Toggles <code>focus</code> class to allow submenu access on tablets.
    	 */
    	( function( container ) {
    		var touchStartFn, i,
    			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
    
    		if ( 'ontouchstart' in window ) {
    			touchStartFn = function( e ) {
    				var menuItem = this.parentNode, i;
    
    				if ( ! menuItem.classList.contains( 'focus' ) ) {
    					e.preventDefault();
    					for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
    						if ( menuItem === menuItem.parentNode.children[i] ) {
    							continue;
    						}
    						menuItem.parentNode.children[i].classList.remove( 'focus' );
    					}
    					menuItem.classList.add( 'focus' );
    				} else {
    					menuItem.classList.remove( 'focus' );
    				}
    			};
    
    			for ( i = 0; i < parentLink.length; ++i ) {
    				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
    			}
    		}
    	}( container ) );
    } )();
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    What have you modified from the downloaded _s package?

    Thread Starter supeherotim

    (@supeherotim)

    My css, functions.php and the page templates.

    Just deactivated all the plugins, updated them and the theme but it still doesn’t work.

    Thread Starter supeherotim

    (@supeherotim)

    Just noticed that when holding my phone sideways the menu items show in a row when the toggle is active. So maybe the navbar is set to display: none somewhere between the width of a sideways held phone and a normal phone.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Check that no other element is overlaying the navbar. If so, you may have to tweak z-indexes.

    I build a lot of sites using _s and if there’s a menu toggle problem, that’s usually the cause. By the way, because fingers are bigger than text, I usually make the button 100% of the width of the screen and use a font size of about 150% of the normal font when the menu toggle is displayed.

    Thread Starter supeherotim

    (@supeherotim)

    I’ve added z-indexes to he toggled menu, and couldn’t find any other z-indexes in the style.css file, but still nothing.

    Thread Starter supeherotim

    (@supeherotim)

    Maybe if I start again, but keep all my styles on hand I can work out what went wrong.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Underscores Menu not responding on mobile’ is closed to new replies.