Streaming live at 10am (PST)

Slider Issue with Navigation


#1

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.

https://preview.webflow.com/preview/surf-camp-sumatra?utm_source=surf-camp-sumatra&preview=de07f57faef56b0824d54a9be4e837c4



#2

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.


#3

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


#4

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.