Sticky scrolling while working with mega menu: issues

Design help Animations & Interactions
1

Hello I am testing a scrolling website the way @Vincent en @Jeandcc made.

My project: Webflow - karelrosseel-testforGoogle

  1. Problem: flexbox not shows items in navcontainer flex ‘space between’
  2. Problem: mega menu, is not showing up correctly when it is hide
  3. Problem: mega menu scrolls togehter with the content, so afterwards the menu is not clicable any more

Thanks to help me
Karel

3problems%20menu
3problems%20menu1562×1194 671 KB

2

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

1 Like
3

  1. 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.

  2. What @Jeandcc said. Opacity won’t make your element dissapear completely, only to be invisible but with full functionality.

  3. 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.

4

hi, I changed already the hide/Show option in the animation

This works but:

  1. I want an easing for the mega menu: is that not possible with Hide/Show: Why???

  2. scrolling is ok now: mega menu stays at the top while scrolling

  3. problem 3 flex between: I changed it to the container with a div-block => yes now it works

  4. But a new problem: scrolling is going to fast from the second horizontal scroll… why??

  5. 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

scrolling%20to%20fast
scrolling%20to%20fast1594×754 199 KB

5

  1. 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%.

  2. 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.

  3. This is way outside of anything a member on forums could answer.

6

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

problem%20mobile%20version
problem%20mobile%20version494×684 79 KB

and how to close the menu line? i tryed a lot…
close%20line%20problem
close%20line%20problem849×643 57 KB