I built a filter menu and interaction for the mobile experience. when you click the plus button the filter options drop down.
The filter state and button are wrapped in a div
positioned relative
The filter options are all wrapped in a separate div
also positioned relative
Both those elements are wrapped in a parent div that is fixed position to the top.
This interaction and elements work the way they are supposed to in Webflow but when I test out on a device the top portion of the filter parent element is sitting behind the filter state wrap.
What do I need to do to get this working correctly?
Your animations are causing the problem. Your filter-parent at 0:00 is not set to move far enough down when the menu opens. I set the Transform Y to 39px. See below.
Also, make sure filter-parent and ‘filter-state-txt’ at initial state are manually set to 0. It will be changed to blue once set. If you don’t, you’ll get an error for not setting any values.
Hi @joejola Thanks for the assistance. I’m using percentages for my value in the drop-down menu. I tried playing around in pixes like you did and I got this
@joejola Ok great. Still not sure why it looks messed up in Webflow but not in the browser? Why does the filter-parent not sit right under show-hide-filter?
