FoundationPress icon indicating copy to clipboard operation
FoundationPress copied to clipboard

Sticky sidebar covering footer

Open danitorresalb opened this issue 7 years ago • 3 comments

How can this bug be reproduced?

  1. Make a wordpress sidebar widget with sticky class (https://foundation.zurb.com/sites/docs/sticky.html).
  2. Go to any page on the site where is displayed a footer too.
  3. Change the size of the window to a small viewport (but not the smallest).
  4. Scroll down

What did you expect to happen? I expected that the widget with sticky class did the same that when you scroll down with the big screen view (disallowing his stikyness before the footer section).

What happened instead? The widget is placed in front of the footer, covering its content.

Please List the Following:

  • FoundationPress version: lastest
  • Foundation version: lastest

Sorry about my english...

Thanks!

danitorresalb avatar Nov 11 '17 10:11 danitorresalb

Hi

I have had problems like this before. Try targeting the z-index of your footer to bring it to the top.

FlatspinZA avatar Nov 11 '17 11:11 FlatspinZA

Thanks for the answer FlatspinZA.

But, do you think it's the optimal solution? I though that there will be a best option. And what level of z-index would be the appropiate?

danitorresalb avatar Nov 11 '17 18:11 danitorresalb

I am not a professional...

But, I have had issues with sticky things, sliders, etc. going over menus, etc, and have always fixed it with a z-index.

I have no idea what the optimal z-index would be, or even if these such a thing as "optimal" in these cases. For me it's been a case of bringing elements that must always be visible to the front of everything, and from what I understand determining your z-index has to do with amount of layers you have, so using the absolute highest to always display your footer shouldn't be a problem.

There are a whole range of z-index discussions here: https://foundation.zurb.com/forum/tags/z-index

FlatspinZA avatar Nov 11 '17 18:11 FlatspinZA