— I have a set of tabs, for which the menu can be viewed as a dropdown on mobile view.
— The dropdown is opened by clicking on a hamburger nav trigger.
—The dropdown can then be closed either by clicking again on the hamburger nav trigger OR by clicking on one of the tab menu items.
The problem is that if the menu is closed by clicking one of the tab menu items, then to reopen the dropdown again, the hamburger trigger needs to be clicked twice. It’s not a HUGE problem but it feels pretty clunky and dysfunctional. It’s like the interaction needs to be ‘reset’ in order for the hamburger trigger to be started again.
I guess this is because there is some problem with there being no ‘On 2nd Click’ action on the tab menu item interaction? Does anyone know if there’s a way around this??
I’ve made a little template to demonstrate (the interaction is only visible on mobile landscape or lower).
Hey, unfortunately I cannot help you but came across the exact same problem.
Which, I think, is this:
The dropdown menu opens with first click on menu item A and closes when you click menu item A a second time. So what happens is when you use a trigger on menu item B to close your dropdown, the second click action on menu item A remains unresolved, but the dropdown menu is closed anyway.
So when you click menu item A again it triggers the original second click action to close the dropdown but since it’s already closed by clicking on menu item B it seems like nothing happens. So you what you describe as ‘resetting’ is actually completing the first action cycle you started, meaning the next click on menu item A restarts the cycle and opens the dropdown.
I would love to find a solution to this myself and hope somebody can help.
hi @ailsargh and @Sebs this is because tab is outside of nav element that is triggering open and close. When tab is inside nav element all starts work as expected.
Hi @Stan - Sorry this is a bit of an old topic now, hopefully you can still help.
I can’t have the tabs contained within the ‘Mobile Tab Dropdown’ container, because the container is only set to display on mobile view. So when the content is nested within the Mobile Tab Dropdown div, the content won’t display on desktop.
Is there something I’m missing here, or do you think I’ll have to duplicate the entire contents of the tabs containers with different nav bars for desktop and mobile use?
Hi @ailsargh I’m not expert on tabs as I do not use them at all nor dropdown menu. But I can look on your project if you will share “read-only” link. Or maybe someone who is creating dropdown menu in WF on regular basis may help too.
Hi @ailsargh you can just copy tabs into mobile menu and on mobile viewport hide these tabs outside. This is simplest solution I can thing about but probably there will be another. As I said I never used your approach with tabs.
Oh duh! This just clicked that I can just hide the actual ‘Hamburger’ nav and not the whole container
Thanks so much for taking time out to reply for this @Stan!
Sorry if this is really basic but one more question if you could help…? Now that the tabs are inside the mobile menu, I had to set the display to absolute so that they weren’t constrained to the dimensions of the mobile menu. But now my footer is not being pushed to the bottom of the page as it isn’t inline with the tabs… do you know of a better way to display these elements so they’re all in line?
I’ve realised the solution of nesting the tab content inside the hamburger nav won’t work, as it then turns the whole page into a link, and anywhere you click on the page opens the tab nav
