Am having an issue with a drop down not showing when used within a slider. On mobile my main navigation is contained within a slider, each nav item is a slider. The issue is that the dropwn down list is not appearing because the overflow on the mask is set to hidden. if I change the overflow to show then the dropdown appears but the other nav items are shown when you scroll right on mobile. I think the overflow on the mask has to be set to none. Any ideas on how I can resolve this ? Any help much appreciated.
I don’t think theres a workaround for this other than creating a custom slider using interactions or using a 3rd party slider. The slider component wasn’t really meant for this purpose.
Hi, thanks for taking the time to reply. So the issue occurs on mobile for example. The client want the navigation to be in a slider unfortunately. Here’s a screenshot of how it looks on mobile:
As you’ll see the dropdown on the item ‘Surf Camps’ does not display over the other slider below.
Any thoughts ?
Thanks
Yeah, I understood what you wanted to do but I don’t think theres a way around it using the built in slider. The overflow:hidden is a crucial part of how the slider works. You can try to use a 3rd party slider plugin but it won’t be visible in the designer and you’ll have to troubleshoot it on your own.
I understand having to deal with a client that thinks they want something but you can tell them a designer of 15 years said a slider navigation is horrible user experience and a regular hamburger should be implemented to avoid confusion. If you put a navigation in a slider, the vast majority of users will not realize it’s a slider and avoid the links on other slides. This is simply bad user experience design. Hopefully they will change their mind.