Genesis Sample Responsive Menu Issue

[ScottFromPA]

This issue has been bugging me for some time now. I'm using the Sample child theme but this issue comes up with many other childs. When you view the the site under 800px the hamburger shows up right? Ok, so you click the hamburger and the menu appears and you have a few buttons that reveal a down arrow on the far right using the sub-menu-toggle class.

The problem is that floated right button must be clicked to reveal the sub choices. The <li>text does not do it.

How do I get the actual navigation text to also reveal the sub choices as well as the down arrow?

I fixed this issue a while back but for the life of me I can find the darn solution again.

http://www.pinangde.com/

[ScottFromPA]

I can't believe I'm the only person concerned about addressing this issue.

[ScottFromPA]

Ah! The issue is hover intent.

The issue is still causing a problem

Code Fix
add_filter( 'genesis_superfish_enabled', '__return_true' );
add_action( 'wp_enqueue_scripts', 'child_enqueue_scripts' );
function child_enqueue_scripts() {
wp_enqueue_script( 'hoverIntent' );
}

The Solution and a Spotty Description
http://keypresswp.com/genesis-fix-for-mobile-menu-sub-menu-problem/

Plugin Solution

mobble

Some Themes Don't Have this Problem Like 1140
https://demo.studiopress.com/eleven40/?_ga=2.78970835.691117572.1520359767-1812957261.1520050812#

[tanyaslogos]

Thank you ScottFromPA! I was looking for an answer to this! Thank you so much for sharing! You are the BEST!

[inisheer]

I have a problem which is a variation on the one above I believe.

The site is in a subfolder so it will generate security warning when you click on it - but there's nothing malicious there. Site is dev.korovinmd.com
Built on genesis framework and genesis sample theme. There are only limited css changes made for style to the downloaded themes.

Problem is that on a phone, the hamburger for responsive menu appears as it should. But on click it reveals a list of all main menu items AND all sub menu items. In addition, if you touch on a main menu item you are taken to appropriate page, but if you touch on a sub menu item it simply dissappears.

I have tried solution to activate responsive menu outline here https://gist.github.com/mjsdiaz/9605372
and it makes no difference. Help! I need to give this site to a client.
Bob

[andytc]

I've used this in the past , it works well and is updated. It's also very useful for one page scroller sites with anchor links , my problem with some of them was when an anchor link was clicked the menu would stay open and you had to click a small 'X' to close it , not very user friendly. This gives the option to close it after a link is clicked , but i'd only use that on a one pager.

https://en-gb.wordpress.org/plugins/slicknav-mobile-menu/

or as paid alternative you could try this - I use this on nearly all my sites as it's genesis friendly , it's not overblown with options that you don't need and you can get just about anything done.

https://robincornett.com/supersideme-mobile-menu/

All in all , i think mobile menus in genesis themes are pretty poor out of the box and really need some work.

[inisheer]

Thanks for advice I'm almost there. I actually put this question into the support forum for Slick Nav plugin but I'll also put it over to you in case you have any thoughts:

dev.korovinmd.com
I’m getting odd behavior. In Slick Nav settings if I put as class to be replaced on mobile devices: #genesis-mobile-nav-primary
Slick Nav Menu appears properly but the original Genesis Mobile Menu is still there. I have left site on this setting so you can see.
If I put as class to be replaced: #genesis-nav-primary
Then I simply get neither Genesis Menus nor Slick Nav menu appearing on small devices.

I’ve tried disabling a few plugins – no change thus far. Any thoughts?
Thanks!

[andytc]

Have you tried using -

.nav-primary

Also check the setting - 'Pixel Width to Switch to SlickNav'

[inisheer]

Well, I kind of got it working by adding a "display: none;" to my phone size @media querie, and adding a new querie at 960px where I have the slick nav menu popping up. I think the plugin was generating a display: none instruction at smaller sizes but it must have been getting overridden by something in genesis. I really haven't done a whole lot of customization on this site.
Not a real elegant solution but it's working.
Thanks
Bob

[Author]

Posts