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.
This method can also be seen in use in my Genesis Starter Child Theme.
In js/global.js change
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|$( '.nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu' ).addClass( 'responsive-menu' ).before('<div class="responsive-menu-icon"></div>');|
hosted with ❤ by GitHub
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Thanks Sridhar. Any ideas how I can get this working on the Sample theme using the following responsive menu: http://sridharkatakam.com/add-beautiful-pros-mobile-responsive-menu-genesis-themes/
I have tried adding ‘Menu’ in the css but it looks very bad:
content: “\f333 Menu”;
1) In responsive-menu.js, replace http://pastebin.com/raw.php?i=M6smw0LZ with http://pastebin.com/raw.php?i=z4pLG4Z8
2) In style.css, add http://pastebin.com/raw.php?i=7PGaAhJ8
OK thanks, that worked.
You can see it on my demo site at http://loavesanddishesdemo.stephpowers.com/
What you have done is fine.
[…] the past I wrote about adding the word MENU to the hamburger menu icon at responsive breakpoints in Altitude Pro and Ambiance […]
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.
Can you deactivate the bwp minify plugin and reply when done?
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!
Hi Sridhar! I was so happy to see this in the tutorials, I am using Executive Pro and the word Menu is not lining up with the css provided http://3dbizcenter.com/work4
.responsive-menu-icon::before, change the
.menu-textchange top margin to 13px.
Sorry I forgot to check the notify me by email checkmark!
perfect thanks, the display elements do trick me up
how does this work on agency pro?
[…] the comments section of Adding the word 'Menu' next to the Hamburger icon in Altitude Pro a user […]
Could you help me adding the word MENU in Wellness Pro theme, Sridhar?
In the current version of the theme, this is built-in but does not work due to a couple of small typos.
wellness.params = typeof wellnessL10n === 'undefined' ? '' : wellnessL10n;
wellness.params = typeof WellnessL10n === 'undefined' ? '' : WellnessL10n;
I changed the typos in responsive-menu.js, but is it built-in, you say? The word Menu does not show up, I do not see it in the source code. I don’t know what to change else..?
Oh, sorry, now it does!! Thank you!
Im using altitude pro and I do not have the abovementioned code in js/global.js
Any help appreciated
Which version of Altitude Pro are you using?
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
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) 🙂