Remove “menu” text from the mobile menu
Latest update: September 14, 2018 | Reading time: 3 to 4 minutesAs the hamburger button has become overly popular through the years, some users have expressed their need for removing the “menu” text from the mobile menu.
When switching to a mobile device, the menu changes position (hides) 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. Fortunately, 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.
First of all, make sure you are working on the child theme. It is the safest way to perform changes without touching the theme and, also, maintain the changes even after the theme has been updated. But, don’t worry if you don’t. We have a workaround for you too. Just keep on reading.
This process when using a child theme
1. Create a folder named “global” inside …/wp-content/themes/templates/
2. Inside freshly created …/wp-content/themes/templates/global/ create a new PHP file named “navigation.php”
3. Add the following text and Save the file
<?php
/*
______ _____ _______ _______ _______ _______ ______ _______
| __ \ |_| ___|_ _| | | | __ \ _ |
| __/ | ___| | | | | - | < |
|___| |_______|_______| |___| |___|___|_______|___|__|___|___|
P L E T H O R A T H E M E S . C O M (c) 2015
File Description: Main navigation template part
*/
$main_menu_location = Plethora_Theme::option( METAOPTION_PREFIX .'navigation-main-location', 'primary'); // Where to put the title
$main_menu_behavior = Plethora_Theme::option( METAOPTION_PREFIX .'navigation-main-behavior', 'hover_menu'); // 2nd level items display trigger
?>
<div class="menu_container"><span class="close_menu">×</span>
<?php
wp_nav_menu( array(
'container' => false,
'menu_class' => 'main_menu ' . $main_menu_behavior ,
'depth' => 6,
'theme_location' => $main_menu_location,
'walker' => ( class_exists( 'Plethora_Module_Navwalker_Ext' )) ? new Plethora_Module_Navwalker_Ext() : ''
));
?>
</div>
<label class="mobile_collapser"></label> <!-- Mobile menu title -->
This process when using the Parent Theme
1. Go to …/wp-content/themes/templates/global/ and, locate the “navigation.php” file.
2. Edit the file and go to the last line (30)
3. Replace
<label class="mobile_collapser"><?php echo esc_html__('MENU', 'healthflex') ?></label> <!-- Mobile menu title -->
with
<label class="mobile_collapser"></label> <!-- Mobile menu title -->
and Save the file.
Notes:
If you are using an FTP client, you may need to make the changes locally on your computer and upload the files on the given directories, replacing the current ones when needed.
If you are using the file manager of your hosting panel, you can utilize the online editor (easier).
Lastly, if you are working with the Parent theme, you can use the WordPress Editor (on Dashboard > Appearance) and, perform the changes on-site (much easier). But, remember: you will need to repeat the process if you update the theme (and you should update the theme when a new version is available).
That’s all for now. Enjoy your time!