Hello I am testing a scrolling website the way @Vincent en @Jeandcc made.
My project: Webflow - karelrosseel-testforGoogle
Thanks to help me
Karel
I’m on my phone so I can’t open your website preview. But I can guess some of the problems and possible fixes.
Problem one: make sure you’re styling the correct element. Navbars normally have a container inside it, so make sure you’re selecting the right Element when applying flexbox
Problem 2: you’re probably only affecting the opacity of the menu. To make the "mega menu " go away for real, you need to set its display to none. (Using some kind of drop-down is also a possible way for you to solve this problem)
Problem 3 : Make sure to place the mega menu inside the navbar, which I believe is set as sticky. If the mega menu is not placed as a child of the navbar , it’s not gonna move with it.
Tomorrow morning I’ll try to get a proper look at your website
Have a good night
Put your logo and nav button into a default div and apply flex: space between to it. It doesn’t work with container for some reason, not sure what’s going on but the fix is as I said - to use simple div for flex parent not container. And if you did that and wanted to ask what’s happened with your nav graphics - the answer is to not set fixed width for your icon class.
What @Jeandcc said. Opacity won’t make your element dissapear completely, only to be invisible but with full functionality.
Megamenu is set to absolute as a child to the body so it scrolls with everything. Either set it to fixed or put it inside your already fixed navbar.
hi, I changed already the hide/Show option in the animation
This works but:
I want an easing for the mega menu: is that not possible with Hide/Show: Why???
scrolling is ok now: mega menu stays at the top while scrolling
problem 3 flex between: I changed it to the container with a div-block => yes now it works
But a new problem: scrolling is going to fast from the second horizontal scroll… why??
Did you know ctrl+shift+ - is not working correctly for webflow: NOT THE SAME: ctrl -/+ and ctrl+shift /-- - Google Docs
look to my post: Add zoom functionality Ctrl+Shift+ - to only zoom into content
Thanks to help me further
Karel
For the easing you need to use both hide/show and opacity. Opacity for smooth disappearance and then hide to remove the object from the site flow. And vice versa, to make an object to appear first you “turn it on” with hide/show, then you make it appear smoothly with opacity change from 0 to 100%.
Because you told the interaction to start the scroll once element starts entering. The “element” in question is the parent div of the scrolling container, and that one is situated a bit higher up than scrolling container itself. Therefore your content is already scrolling when you see it.
This is way outside of anything a member on forums could answer.
Thanks a lot, only for mobile I have a last problem:
I looked to the video about mega menu: https://youtu.be/ILV1fIzKlhA?t=1320
and in the same video: on minute 47.00
how to make the 100% height smaller… now it looks very bad my mobile version.
Thanks to help me out.
Karel
