Sridhar Katakam

Genesis and WordPress Tutorials

Adding the word ‘Menu’ next to the Hamburger icon in Altitude Pro

by 24 Comments

In the members-only forum, a user asked:

I’m using altitude pro, but I suspect this would apply to other themes as well. I’ve looked online and through the tutorials and understand how to replace the dashicon. However, adding the word Menu next to the dashicon is not working well in my tests

...I’m trying to get the hamburger aligned with the text Menu similar to this: https://css-tricks.com/three-line-menu-navicon/

I also want to style the font face/font size of the text Menu.

Here's one way in which 'Menu' text can be added to the right of hamburger menu icon in Altitude Pro.

altitude-pro-menu-text

This method can also be seen in use in my Genesis Starter Child Theme.

In js/global.js change

$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');
view raw gistfile1.js hosted with ❤ by GitHub

to

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thanks for this helpful tutorial! I’m trying to implement this in my custom version of Foodie Pro, but there is already a span defined in that space in the javascript file. (They’re using spans to create the 3 bars instead of an icon.) I tried adding a second span and that didn’t work out because the css for the spans were conflicting, so I changed the menu-text class to a div and used CSS to align the text to sit to the right of the menu. Is there a better way to do that more in line with your original method? Or is that another valid approach? I’m not as well versed in javascript.

    You can see it on my demo site at http://loavesanddishesdemo.stephpowers.com/

    Reply

  • Hello,

    I am having issue with the Mobile menu. In mobile the theme shows 2 Dashicon Menu Icons. URL to my website kleverkdesign.wpengine.com can anyone help me out please this is driving me crazy.

    Appreciate your support.

    Warmest

    Reply

  • This is a neat little thing for visitors who do much of their visiting via a mobile device or Ipad, or something with a smaller screen resolution.

    The only issue is that if you have a snippet of code that removes query strings from static resources, the “Menu” will not show up. If you remove that snippet of code in your functions.php, the “Menu” shows up.

    For me, I’d rather keep the query strings and version numbers out of my html output, so I’m unable to implement this tutorial.

    But this was a neat, simple snippet, Sridhar. Appreciate your work!

    Reply

  • Hi 🙂
    Im using altitude pro and I do not have the abovementioned code in js/global.js

    Any help appreciated

    Thanks 🙂

    Reply

      • Gday there 🙂

        Currently using Altitude Pro 1.1.2..and i just noticed that SP updated that to 1.1.3
        in July…however I am also not seeing that line of code in 1.1.3 either.
        I looked in js/global.js and js/responsive-menus.js

        Reply

      • I feel really silly.. it seems to already include Menu with the hamburger icon.
        *head desk, head desk, head desk
        Sorry.. been having one of those weeks :-/ lol
        (btw.. thanks for such a great site too) 🙂

        Reply
    • >