Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Add "MENU" text to 3-BAR Menu button */
.btn-navbar {
width: 90px;
height: 30px;
vertical-align: top;
}
.btn-navbar:after {
content: "Menu";
float: right;
margin: -16px 0 0 0;
}
/* END OF Add "MENU" text to 3-BAR Menu button */
Credit: @jrisberg
Now if you don’t want the 3 bars to appear at all, then use this code instead:
Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF Add "MENU" text to 3-BAR Menu button (Needs additional php code in Child Theme functions.php) */
.btn-navbar {
width: 60px;
height: 30px;
vertical-align: top;
}
.btn-navbar:after {
content: "Menu";
float: right;
margin: -5px 0 0 0;
}
/* END OF Add "MENU" text to 3-BAR Menu button (Needs additional php code in Child Theme functions.php) */
Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.
Remember: you shouldn’t edit the theme’s functions.php.
// START OF Add "MENU" text to 3-BAR Menu button (Needs additional CSS code in Child Theme style.css)
// Remove 3-bars from menu button
add_filter('tc_menu_display', 'rdc_menu_display');
function rdc_menu_display($output) {
return preg_replace('||', null, $output);
}
// END OF Add "MENU" text to 3-BAR Menu button (Needs additional CSS code in Child Theme style.css)
23 thoughts on “Add “MENU” text to 3-bar Menu button”
Glad that you got what you wanted!
totally Wordpress newbie here so I’m not savvy enough to make a child theme, but am okay with adding custom css. Your first snippet worked for me just in the additional css, so thank you! I did have to find the correct name for the toggle in my theme (Cubic/Boardwalk) using my browser inspector… so replaced .btn-navbar with .sidebar-toggle. In my case it didn’t delete the hamburger but added the text ‘menu’ next to it. Which was precisely what I wanted anyway.
This does not work for me as well. I have a child theme. Is there a fix for this yet?
Hi Andrew,
Please open a new thread in the support forum about this : https://wordpress.org/support/theme/customizr
We’ll try to help 🙂
Cheers
This code isn’t working Version: 3.4.6. In previous version it was working fine.
Updated Snippet – Since Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.
Already tried implementing this snippet in a Child Theme but it isn’t working.
Amazing theme! Is there a way to increase the font size of the menu links on the mobile menu? Thanks!
I tried this snippet with the latest version. (It did not work.) Can we please have an updated snippet?
Hi Heidi,
which one? The php one?
The css one? Where did you put it?
Thanks.
I used the “add “MENU” text to 3-BAR Menu button” CSS method. Placed the following in Custom CSS.
.btn-navbar { width: 90px; height: 30px; vertical-align: top; } .btn-navbar:after { content: "Menu"; float: right; margin: -16px 0 0 0; }If you say it’s works, I’ll test it again. Maybe the “Menu” text did not appear due to cache or Cloudflare.
Hi Heidi,
no it doesn’t work if you put it in the Custom Css Box :). Not your fault!
Since Customizr 3.3.1 (Customizr-Pro 1.0.12), due to new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. You need a child-theme and put the code in its style.css or, if you prefer, use a plugin for custom css.
Thanks for reporting this, this snippet will be updated with an alert.
Cheers
I retested it in Chrome, IE, Firefox, Safari. The code just makes the button wider, but there’s no “Menu” text.
Please see screencaps:
http://imgur.com/x7XTu3c&E68DFY3#0 – original
http://imgur.com/x7XTu3c&E68DFY3#1 – w/ code
It also added a CSS validation error.
8 .btn-navbar:after Value Error : content \”Menu\” is not a content value : \”Menu\”
For now, I am using the first section of code which makes the button bigger.
Thanks Heidi. Just starting a review/update of all my snippets and hopefully addressed this one.
I am also not having any luck. The menu is button, but the text does not show up. Any tips would be much appreciated 🙂
Never mind. It was an error on my part. After following the Wordpress Codex on child themes and then using your snippet, it worked! You theme is excellent. 🙂
When I am on a small viewport, like my Samsung Galaxy SIII using the 3-bar menu button, I am unable to open sub-menus. There is a button showing that they are available, but touching or holding the button does not open the sub-menu. How can I fix this?
Hi, have you tried the demo version of the site? http://demo.presscustomizr.com/
If it works in the demo, it means that it might be related to a plugin conflict with theme. Try desactivating your plugins and see if it fixes the issue.
Hope this will help.
Updated, so you now have 2 options:
1) Button shows Menu+3-bars
2) Button shows Menu (without 3 bars)
Hi Matt, You can easily add a custom glyph icon to Customizr : just define it in your style.css with @fontface property and taget the wanted selectors.
Thanks a ton, sir. 🙂 Great theme.
You’re welcome Matt, enjoy the theme!
Running this on a test directory and loving it already…. how can I use a custom glyph icon substitute?