Need to customize Aria label on native WP Hamburger Menu

  • Unknown's avatar
    haleyassoc · Member ·

    I need to customize the Aria label bolded in the code below using the Additional CSS panel in WordPress:

    <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=”{&quot;overlayOpenedBy&quot;:[],&quot;type&quot;:&quot;overlay&quot;,&quot;roleAttribute&quot;:&quot;&quot;,&quot;ariaLabel&quot;:&quot;Menu&quot;}”><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=”http://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.

  • The topic ‘Need to customize Aria label on native WP Hamburger Menu’ is closed to new replies.