-
Loving the latest updates to GeneratePress and GenerateBlocks.
I am using the Generate Blocks Navigation Block.
On desktop the setting for the Sub Menu Type is set as Hover.
This works well, just how the user would expect.
Hover over the menu item with a dropdown arrow and the sub menu opens.But that setting also carries over to the Overlay menu.
Menu items with a dropdown cannot be clicked and only the tiny dropdown arrow is clickable.
It would be better for the user if the whole dropdown menu item was clickable, the text AND the dropdown arrow.Is there a way for the overlay menu to have the Sub Menu Type set to Click Menu Item, but have the desktop menu have the Sub Menu Type set to Hover?
Many thanks.
-
Hi Simon,
thanks for the great feedback it is much appreciated.
Is it possible to see the issue on your site ?
It may be possible to resolve that with some styles adjustments, I just need to see the type of menu links to asses. -
Hi David,
My top level navigation link (with the dropdown) wasn’t linking to a page. It was just a dummy hashtag link that triggered the dropdown on hover. The subject was “Services”, and there are a lot of them.
Having done some more digging I have discovered that it is best practice is to have a top level nav item that goes to a page rather than just be an ’empty’ signpost link. So ideally I would need a menu item that links to a page AND ALSO has a dropdown.
I have tested all three methods to trigger a submenu (HOVER, CLICK MENU ITEM and CLICK TOGGLE) using a dummy link and using a ‘real’ link (with a submenu) that goes to a page.
Please see my findings below.
Which one do you recommend for a navigation that contains some links to pages that also have dropdowns?
CLICK TOGGLE would seem to be the winner, but the toggle is tiny. I know I can make it bigger with “gb-submenu-toggle” but that then messes up the rest of the menu item, because the toggle sits inside the padding for the menu items.
===Opening submenu “ON HOVER”===
1. Using an empty dummy link in the nav (set to #) to act as the parent of the submenu.
This works fine on desktop. Hovering over the parent link opens the submenu.
On the overlay nav the submenu can only be opened by clicking on the small Arrow icon.
Was expecting the submenu to open when the parent link was clicked.2. Using a real link in the nav (linked to a page on the site) which ALSO has the dropdown link to the submenu.
This works fine on desktop. Linked page can be opened and dropdown menu shown.
On the overlay nav the linked page opens on click. The submenu can only be opened by clicking on the small Arrow icon.===Opening submenu with “CLICK MENU ITEM”===
1. Using an empty dummy link in the nav (set to #) to act as the parent of the submenu.
This works fine on desktop. Clicking the empty parent link opens the submenu.
This works fine on overlay too.2. Using a real link in the nav (linked to a page on the site) which ALSO has the dropdown link to the submenu.
On desktop the real link doesn’t work. Clicking the link just opens the submenu, it does NOT take you to the target page.
The same thing happens on overlay. Clicking the link opens the submenu, but there is no way to access the linked page.===Opening submenu with “CLICK TOGGLE”===
1. Using an empty dummy link in the nav (set to #) to act as the parent of the submenu.
On desktop, as expected you have to click the down Arrow to see the submenu.
On overlay, as expected you have to click the down Arrow to see the submenu.2. Using a real link in the nav (linked to a page on the site) which ALSO has the dropdown link to the submenu.
On desktop, clicking the link goes to the page. Clicking the arrow opens the submenu.
On overlay, clicking the link goes to the page. Clicking the arrow opens the submenu. -
Hi Simon,
You can use the Hover option, then add this CSS to expand the toggle’s clickable area so the entire menu is clickable on mobile, not just the toggle:
span.gb-submenu-toggle:before { content: ''; position: absolute; inset: 0; } -
HI there,
I had the same problem, and Alvind’s CSS snippet solves it.
Thanks 🙂But I think it would be good if it were mentioned in the documentation! Who wants to click on the little icon on a mobile device? Most people don’t know about it!
Otherwise, I want to say thank you for the current state. V2, overlay panels, and conditions are really awesome! Best theme and block plugin ever. 🤩
Thank you very much and keep up the good work. -
Hi @dieter,
Thank you very much for the positive feedback! 🙂
The CSS snippet is a bit of a hacky workaround for now — once we have a better solution, we’ll update the documentation accordingly.
- You must be logged in to reply to this topic.