Window Shade navigation menu with overflow hidden

Hello, I am trying to replicate the desktop navigation menu from this site (www.flextronics.com) and am having some difficulty making the Overflow concept such that the current scroll location is preserved after the “window shade” like drop down menu closes vs. the page content resetting to the top.

Is anyone available to help me out with my design? I just need a step in the right direction and could probably take it from there. Thanks!

1 Like

Hi @rbates, Just to confirm with you, you are trying to build a navigation menu exactly like the one in the flextronics site?

i.e. fullscreen menu that slides down from the top when clicked?

Thanks for clarifying!

Exactly.

I’ve been able to do everything except combine the full screen the nav menu and eliminate scrolling of page contents while the nav menu is in view without resetting the page contents to the top of the page contents everytime the nav menu is closed.

In the Flex website, you can scroll the page contents (e.g., like to the bottom of the page or footer), click for the nav menu to drop down, and then close the nav menu with the previously scrolled page contents staying where you had scrolled (e.g., like to the bottom of the page or footer) vs resetting to the top slider.

Hi Ron, Thanks for the clarification - I built the demo for this functionality, but I ran into a bug that is affecting how our Interactions change a div’s height when using percentages.

I’ve notified our engineering team about this - hopefully we can resolve this soon. I’ll follow up with this thread once I hear back - in the meantime, you will not be able to use Webflow to achieve this navigation design.

Many thanks for your efforts. Standing by while the bug is fixed by your engineering team.

Hi @rbates, Appreciate the understanding on this. I went ahead and made a demo for a workaround that is pretty close. Instead of changing the height of the drawer it slides it down from the top.

Take a peek here:
Demo: https://webflow.com/website/Demo-Kit
Page Title: Full Page Nav Menu

Hope this helps you out! I can add more detail if needed - keep me posted on your progress :slight_smile:

1 Like

Sweet, this will work just fine if the nav stays positioned at the top of a page. Thanks for sharing.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.