Menu icon Foundation
Dropdown menu is lost behind slider

I have a sticky header with a navigation menu in use but the dropdown navigation (flyout) disappears behind the slider that is directly below it. (slick slider)

The problem appears to be caused from using the data sticky option for zero margin on my sticky header. "data-options="marginTop:0;"

When i remove the data option 'marginTop' then the flyout shows on top of the slider correctly but then when i scroll the page the sticky header has the default 1rem margin on the top  which is NOT what i want.  Is there a way to fix it so i can have the marginTop set to zero and still have my flyout stack above the slider?

sticky

I have a sticky header with a navigation menu in use but the dropdown navigation (flyout) disappears behind the slider that is directly below it. (slick slider)

The problem appears to be caused from using the data sticky option for zero margin on my sticky header. "data-options="marginTop:0;"

When i remove the data option 'marginTop' then the flyout shows on top of the slider correctly but then when i scroll the page the sticky header has the default 1rem margin on the top  which is NOT what i want.  Is there a way to fix it so i can have the marginTop set to zero and still have my flyout stack above the slider?

Ken Minx almost 2 years ago

Darryl,

Did you resolve this? I have the same issue using data-options=marginTop:0 or data-margin-top=0 parameter. If I remove the slider, it works ok. Oddly, I noticed with slider in place, if I scroll down 1 pixel, it then works...

Ken

Guy Van Bael almost 2 years ago

It's probably just a css issue. Checkout the z-index property of both the sticky header and the slider.

Make sure the z-index property of the sticky header is above the one of the slider.