Site logo

Archived topic

Exchange with a in the mobile-menu-control-wrapper

5 replies · Started by Bryan on October 21, 2022

Viewing posts 1–6 of 6

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?

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.

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

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');

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

You are welcome :)

This archived topic is closed to new replies.