[Resolved] Issue with moving responsive menu items

[Pete]

I love the responsive menu but because it has a hover dropdown submenu it makes it very hard to navigate…. have a look at my youtube. As well as having trouble with a mouse it also has trouble on my phone. Each time i tap on the contact menu item it moves and triggers the registration menu item.

http://youtu.be/cVOFQzjCPTc

[Tom]

Hi Pete,

Thanks for the video! By far the best way for me to understand what’s going on.

1. In the next version of GP, I’ve fixed the bug that makes it so those menu items are side by side when centered, they will be stacked on top of each other as they should be.

2. On actual mobile browser, a tap is required to open the dropdown, and a second tap is required to open the parent menu item, so it’s much more user friendly when your users are actually on mobile devices.

I’m thinking about creating a new addon that replaces those mobile dropdown menus with side pull-out menus, which would be pretty cool as well.

So give it a try on your actual phone, and it should be much better. When the new version comes out with that bug fix, it should be even better.

Let me know 🙂

[Pete]

Thanks Tom, I actually love the side by side menu! Maybe you can keep it like that if you make the drop down happen only on a click rather than a hover? I tested the menu on my phone and it still had a problem when I tapped to bring the menu down. I love the menu as it is now because it is side by side. Vertical drop down is too long and often needs scrolling to see all the items. If you could investigate a way to keep the side by side but fix the hover issue that would be awesome.

Thanks Pete

[Tom]

I actually just had someone report that as a bug haha guess you can’t please everyone 🙂

The issue you’re having is specifically because they’re side by side, but I’ll see if I can come up with a solution to that for you. At this time I can’t really think of anything – the dropdown will push the others out of the way and cause issues unfortunately.

[Pete]

Thanks for that. What if the menu says the same but changes to the vertical list when it detects a sub item?

[Tom]

Might be something that I can give you custom code for.

Is your site up and running? Would be great if I can see it while I come up with a solution that will work for you 🙂

[Pete]

Thanks Tom. My website is perthmetro.net/hair

[Tom]

Doesn’t look like you have any dropdown menus there yet?

Let me know 🙂

[Pete]

Ok done. Under the Contact us.

[Pete]

Hi Tom, I’ve brought the premium package (the best money i’ve spent in a long time), so the secondary nav will help me out but i’m happy to test any updates to the prmary nav bar if you like.

[Pete]

I’ve found another issue with the auto dropdown menus, in particular the secondary menu. If you have a look at my website http://www.perthmetro.net/hair/ you ‘ll see 2 sub menu items under my contact item on my desktop computer when it is in responsive mode/width when i mouseover on the Contact menu the submenu drops down, all good, but… when I then move my mouse down to the My Account item the dropdown retracts and moves the My account away from my mouse…

Now, when I’m on my phone I tap on the secondary menu, all good, but when I tap on the contact item to open the drop down it loads the contact page and doesn’t let me access the dropdown sub menu items!!

Maybe…
1. disable the entire AUTO aspect of the dropdowns, make it so that the menu items need to be clicked/tapped to open up
2. disable the auto retraction of the sub menu items. Make it so that you need to tap on the parent item to retract the sub menu.

[Pete]

I think the solution is to implement the same menu structure as the “Responsive” theme in that when in responsive mode all submenu items are dropped down by default when the “Menu” item is tapped/clicked.
ps. but keep the side by side structure 🙂

[Tom]

Hi Pete,

That’s happening because the mobile menu is built for mobile devices – on mobile devices, you need to tap to open and close the menu item.

It’s pretty rare that someone on a desktop navigates your website with their browser resized down to mobile size, so I didn’t think adding more javascript to the page was worth it.

With that being said, I’ll look into if there’s a simple way to disable hover on the desktop if the browser is below a certain size, but the idea of adding code that disables hover functionality into GP doesn’t really sit well with me. Hacky stuff like that can be a real pain later on if something goes wrong.

Let me know if there’s a non-hacky solution out there – I’ll also take a look at how responsive does their menu.

Thanks!

[Pete]

I agree with you and the the responsive menu on a desktop but there is still the issue of it on my mobile phone. When I tapped on contact, not to go to the contact page but to open the drop down, however the tap loads the contact page and stops the drop down from staying open.

Auto opening of the drop down when tapping on the “menu” will fix this.

[Tom]

Ah, well that definitely shouldn’t be happening.

Can you confirm if that happens on the primary menu as well?

[Author]

Posts