Need to customize Aria label on native WP Hamburger Menu
-
We need to customize the Aria label “Open menu” in the code below using the Additional CSS panel in WordPress using the Twenty Twenty-Two theme
<nav class=”has-text-color has-background-color is-responsive items-justified-left css-nav wp-block-navigation is-content-justification-left is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex” aria-label=”Header navigation” data-wp-interactive=”core/navigation” data-wp-context=”{"overlayOpenedBy":[],"type":"overlay","roleAttribute":"","ariaLabel":"Menu"}”><button aria-haspopup=”dialog” aria-label="Open menu" class=”wp-block-navigation__responsive-container-open ” data-wp-on–click=”actions.openMenuOnClick” data-wp-on–keydown=”actions.handleMenuKeydown”><svg width=”24″ height=”24″ xmlns=”https://www.w3.org/2000/svg” viewBox=”0 0 24 24″><path d=”M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z”></path></svg></button>
The most recent attempt was to add the following code copied from the Chrome Inspector Panel to the Additional CSS panel in WordPress:
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{ aria-label="Open Navigation"; }
This had no effect.
Any help would be greatly appreciated.
- You must be logged in to reply to this topic.