Hi peoples,
here’s read-only link: https://preview.webflow.com/preview/bohemiasektshop?utm_medium=preview_link&utm_source=designer&utm_content=bohemiasektshop&preview=7364bb044be18da68d727209759d02c7&mode=preview
- The bottle menu on the left side is Sticky with 200 bottom position. If you scroll own, the bottom position doesn’t work.
- Tab Menu Has 2 height set to 1, otherwise it pushes the content.
- Even if I let it push the content, the bottom position is stillnot working.
Not sure if I’m dealing with a bug, or doing something wrong.
My second question is - how come when Tab Menu 2 has auto height it pushes the Tab Content 2 down? Shouldn’t Sticky act just like absolute position and therefore not affecting the other elements?
With height 1:
With height Auto:
Thank you for reading this, let me know If I shall provide more info.
Hi,
Sticky elements has normal flow (static) and relative offset so you shouldn’t be setting height to achieve desired position.
If you remove height it will respect bottom offset and then you can wrap menu and content in some horizontal flexbox. Or just set the menu: height: auto; float: left;
P.
Thanks Peter,
removing height does not respect the offset. Sadly.
I don’t have the option to change float, because the Tab Menu is a flexbox.
Even if it did, I need the menu to overlap everything.
Right, but sticky position doesn’t work that way. You can achieve correct offset with flexbox as shown below:
However, to overlap menu will require content block to be absolute and sized or relative with negative margin.
Good luck.
P.
Alright, got it. Thanks for clearing that out.
I will drop the Tabs component and rework it in a different way.
