Add “MENU” text to 3-bar Menu button


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 28-Aug-15 (3.4.8) 3.1-3.4.*

Where to copy/paste this code?

NoteSince 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.

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.

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?

NoteSince 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.

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.

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.


Related Snippets you may also like


23 thoughts on “Add “MENU” text to 3-bar Menu button

  • Tina Mammoser

    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.

    • Dave Bardell Post author

      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.

  • Justin Lewis

    Amazing theme! Is there a way to increase the font size of the menu links on the mobile menu? Thanks!

  • Heidi Go

    I tried this snippet with the latest version. (It did not work.) Can we please have an updated snippet?

      • Heidi Go

        I used the “add “MENU” text to 3-BAR Menu button” CSS method. Placed the following in Custom CSS.

        If you say it’s works, I’ll test it again. Maybe the “Menu” text did not appear due to cache or Cloudflare.

        • Rocco Aliberti

          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

      • Heidi Go

        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.

      • Justin

        I am also not having any luck. The menu is button, but the text does not show up. Any tips would be much appreciated 🙂

        • Justin

          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. 🙂

  • Dennis Bills

    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?

  • Nicolas

    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.

Comments are closed.