Rename "Primary menu" in mobile view

if you’re working on a child theme, then you’ll only have to add the override the function by pasting it on your child theme’s functions.php

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

You’ll just have to modify the text on this line:

<button class="menu-toggle"><?php _e( 'Primary Menu', 'storefront' ); ?></button>

Note: We don’t need to add this function to a hook, because it will just override the function present on Storefront, but this method will only work if you’re using a child theme.

Hope this helps!

For now you’ll need to add a custom translation or to plug the relevant function. In the next release I’ll add a filter (storefront_menu_toggle_text) to change this.

Hi,

I’ve put the below woothemes recommended code in my child theme’s functions.php and it isn’t changing the text from “Primary Menu”.

add_filter( 'storefront_menu_toggle_text', 'jk_storefront_menu_toggle_text', 10 );
function jk_storefront_menu_toggle_text( $text ) {
	$text = __( 'Navigation' );
	return $text;
}

My functions.php isn’t erroring and my version of the storefront theme is up to date so it does include the ‘storefront_menu_toggle_text’ filter. I feel like I’m missing something obvious but it just isn’t working. Any ideas?

Thanks

@wooassist– in order to change the font-family for whatever text I replace “Primary Menu’ with, what css selector do I target?

I added the above to my functions.php and I changed the name “navigation” to “menu” but now the primary menu in mobile will not toggle when visited.

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'storefront', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'storefront-child', get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

add_action( 'init', 'custom_remove_footer_credit', 10 );
function custom_remove_footer_credit () {
    remove_action( 'storefront_footer', 'storefront_credit', 20 );
    add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
}

function custom_storefront_credit() {
    ?>
    <div class="site-info">
        ? <?php echo get_bloginfo( 'Simsolve' ) . ' ' . get_the_date( 'Y' ); ?>
    </div><!-- .site-info -->
    <?php
}

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

?>

Experiencing the same problem as rwisneske, any suggestions how to fix this?

To fix that mobile menu toggle issue go to the Menus section of your admin panel. Duplicate your Primary Menu and give the duplicate menu a title like “mobile menu”, or whatever. Then at the bottom of the page in a section called Menu Settings check the box that says Handheld Menu. Click on the Save Menu button. Now that “handheld” menu will appear in small screens and toggle as it should.

Thanks pict3000! I’ve followed your instructions, but the menu still doesn’t toggles.

I’v used following code below in my functions.php:

function storefront_primary_navigation() {
?>
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<button class=”menu-toggle”><?php _e( ‘Primary Menu’, ‘storefront’ ); ?></button>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
</nav><!– #site-navigation –>
<?php
}

Near the top of your menu edit page, there is a pull-down menu next to the words “select a menu to edit:”. Is your new menu selected there with the words (handheld menu) in parentheses?

If not, try again. With your new handheld menu selected in that pull-down, tick the box that says “Handheld Menu” near the bottom of the menu edit page. And make sure you’re not falling prey to the usual cache problem. Clear your cache if changes aren’t working and see if that helps.

Your code looks fine.

Storefront has been updated so now you only need to add this code to your functions.php file and no more problems with not being able to actually toggle the button.

function mobile_menu_name_2506490( $text ) {
$text = 'New name goes here';
return $text;
}
add_filter( 'storefront_menu_toggle_text', 'mobile_menu_name_2506490' );

Thanks Roxa, works perfect.