[Resolved] Exchange with a in the mobile-menu-control-wrapper

Home Forums Support [Resolved] Exchange with a in the mobile-menu-control-wrapper

Home Forums Support Exchange with a in the mobile-menu-control-wrapper

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2381573
    Bryan

    To address some accessibility issues, we are trying to exchange the <nav> with a

    tag on the id=”mobile-menu-control-wrapper” element. We see that this <nav> tag is hard-coded into the /inc/structure/navigation.php using the generate_do_header_mobile_menu_toggle() function; however, we do not see a way to make the desired edit. Is it possible?
    #2381605
    Ying
    Staff
    Customer Support

    Hi Bryan,

    It’s not very easy to switch the tag, and I don’t think the <a> would work in this case, you might be able to use <div>or other tags.

    Let me know.

    #2381609
    Bryan

    Looks like the submission got mangled… we are talking about exchanging that nav tag with a div, not the a/anchor.

    #2381631
    Ying
    Staff
    Customer Support

    In this case, the steps would be:

    1. Create a new function, eg. new_generate_do_header_mobile_menu_toggle() based on the theme function generate_do_header_mobile_menu_toggle() to switch <nav>to <div>.

    2. Remove the function generate_do_header_mobile_menu_toggle() from the theme.

    3. Add the new function new_generate_do_header_mobile_menu_toggle() to the theme.

    Here’s the code:

    <?php
    /**
     * GeneratePress child theme functions and definitions.
     *
     * Add your custom PHP in this file.
     * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
     */
    function new_generate_do_header_mobile_menu_toggle() {
    	if ( ! generate_is_using_flexbox() ) {
    		return;
    	}
    
    	if ( ! generate_has_inline_mobile_toggle() ) {
    		return;
    	}
    	?>
    	<div <?php generate_do_attr( 'mobile-menu-control-wrapper' ); ?>>
    		<?php
    		/**
    		 * generate_inside_mobile_menu_control_wrapper hook.
    		 *
    		 * @since 3.0.0
    		 */
    		do_action( 'generate_inside_mobile_menu_control_wrapper' );
    		?>
    		<button <?php generate_do_attr( 'menu-toggle', array( 'data-nav' => 'site-navigation' ) ); ?>>
    			<?php
    			/**
    			 * generate_inside_mobile_menu hook.
    			 *
    			 * @since 0.1
    			 */
    			do_action( 'generate_inside_mobile_menu' );
    
    			generate_do_svg_icon( 'menu-bars', true );
    
    			$mobile_menu_label = __( 'Menu', 'generatepress' );
    
    			if ( 'nav-float-right' === generate_get_navigation_location() || 'nav-float-left' === generate_get_navigation_location() ) {
    				$mobile_menu_label = '';
    			}
    
    			$mobile_menu_label = apply_filters( 'generate_mobile_menu_label', $mobile_menu_label );
    
    			if ( $mobile_menu_label ) {
    				printf(
    					'<span class="mobile-menu">%s</span>',
    					$mobile_menu_label // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- HTML allowed in filter.
    				);
    			} else {
    				printf(
    					'<span class="screen-reader-text">%s</span>',
    					esc_html__( 'Menu', 'generatepress' )
    				);
    			}
    			?>
    		</button>
    	</div>
    	<?php
    }
    add_action('wp', function() {
    remove_action( 'generate_before_navigation', 'generate_do_header_mobile_menu_toggle' ,10,2);
    });
    
    add_action( 'generate_before_navigation', 'new_generate_do_header_mobile_menu_toggle');
    #2382482
    Bryan

    Exactly what I needed. Thank you for the quick response and solution!

    #2382484
    Ying
    Staff
    Customer Support

    You are welcome 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.