Modify small screen (mobile) main menu bar

The main mobile screen menu bar — i.e. before the main navigation is tapped on and therefore collapsed — I want to modify what the text says. The default text is “Navigation”. I want to change that to say “Tap For Menu”.

The Storefront function for that is in header.php. I tried overriding that function in my child theme’s function.php, but the menu won’t collapse on click or tap. The text was changed as I wanted, but the menu won’t collapse (expand).

What is the proper way to hook in and make these changes?

Storefront’s function in header.php:

function storefront_primary_navigation() {
		?>
		<nav id="site-navigation" class="main-navigation" role="navigation">
		<button class="menu-toggle"><?php apply_filters( 'storefront_menu_toggle_text', $content = _e( 'Primary Menu', 'storefront' ) ); ?></button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
		</nav><!-- #site-navigation -->
		<?php
	}

My overridden function in child theme’s function.php:

function storefront_primary_navigation() {
		?>
	<nav id="site-navigation" class="main-navigation" role="navigation">
		<button class="menu-toggle"><?php _e( 'Tap For Menu', 'storefront' ); ?></button>
		<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
	</nav><!-- #site-navigation -->
	<?php
}

Please tell me how I can properly modify the menu bar.