Twenty Seventeen: Remove “menu” text from the mobile menu

by YOUNG JIN LEE 카테고리: Space | 40 views

When switching to a mobile device, the menu changes position and, requires the user to click on the hamburger button to swipe it out from the right edge. Near to the button, you can see the “menu” text which is actually hardcoded and, you can’t change it or remove it. Even trying with CSS will not be possible as, it is included in a function that is related to the button and, a display:none; property will result in hiding both of them.

But You can simply change one line in a .php file and, completely remove the text without touching the button.

Let’s see how we can do that.

For Korean: 워드프레스 Twenty Seventeen 테마를 사용하시는 분 중에 모바일 메뉴에서 ‘Menu‘(또는 ‘메뉴’)자를 제거하고 싶은 분이 계실 줄로 압니다. 아래와 같이 그대로 따라하시면 제거할 수 있습니다. child 테마에 해당 폴더와 파일을 그대로 복사해서 수정해주시면 됩니다.

1. Find a .php file

twentyseventeen > template-parts > navigation > navigation-top.php

2. Copy navigation-top.php into child folder

twentyseventeen-child > template-parts > navigation > navigation-top.php

3. Change ‘Menu’ to be empty

Before:

<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.2
 */

?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
	<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
		<?php
		echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
		echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
		_e( 'Menu', 'twentyseventeen' );
		?>
	</button>

	<?php
	wp_nav_menu(
		array(
			'theme_location' => 'top',
			'menu_id'        => 'top-menu',
		)
	);
	?>

	<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
		<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
	<?php endif; ?>
</nav><!-- #site-navigation -->

After:

<?php
/**
 * Displays top navigation
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since Twenty Seventeen 1.0
 * @version 1.2
 */

?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentyseventeen' ); ?>">
	<button class="menu-toggle" aria-controls="top-menu" aria-expanded="false">
		<?php
		echo twentyseventeen_get_svg( array( 'icon' => 'bars' ) );
		echo twentyseventeen_get_svg( array( 'icon' => 'close' ) );
		_e( '', 'twentyseventeen' );
		?>
	</button>

	<?php
	wp_nav_menu(
		array(
			'theme_location' => 'top',
			'menu_id'        => 'top-menu',
		)
	);
	?>

	<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
		<a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
	<?php endif; ?>
</nav><!-- #site-navigation -->

Finished.