Archived topic
Exchange with a in the mobile-menu-control-wrapper
5 replies · Started by Bryan on October 21, 2022
To address some accessibility issues, we are trying to exchange the <nav> with a
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 :)