Scroll Box not working when inside a fixed element

Design help General
1

Hi All,
I may be trying something that isn’t possible!

I have built a fixed position side navigation div that is 100VH, it slides out from the right when the menu button is clicked.
Pretty standard so far.

Inside it I have a detailed menu that I would like to scroll to show the content that is hidden from view in the initial viewport.

I have placed a div inside my fixed menu div, and I am using it to hold my menu items, I have given it a set height and set the overflow to scroll.

This works perfectly when inside the main body, but placed inside the fixed menu slide out it will not scroll in the browser, the hidden content remains hidden.

Is it not possible to have a scrolling div inside a fixed div?

Hope someone out there can help, it is driving me crazy.

Here is my public share link: LINK TO Webflow VERSION
(how to access public share link)

2

@allthingsGJD,

Can you share a link so we can see?

How to share a link:

Thanks,
~B.

3

Hi B,
It is in the message above, click on the big blue word link, I don’t know why it showed up that way!

4

Here is the live view for reference…
http://rebel11.webflow.io

5

@allthingsGJD,

Graham,

Try these settings to see if they get you what you want…

On these Classes…

Wrapper
Change the “Height” from Auto to 100VH

Menu
Change “Height” from 1200px to 100VH

Menu Scroll
Change “Height” from 86% to 100VH
Change “Overflow” from Scroll to Auto

Check it and let me know if this is the fix you’re looking for. If not, we’ll give it another go.

Thanks,
~B.

6

Hi Brian,

Thanks for your help, I applied your settings one by one, testing each time, it didn’t solve the problem.

However, I have now narrowed it down to what is causing the problem.
I made a pasteboard page for testing, I suspected it was the animation that was the issue, see here…
http://rebel11.webflow.io/paste

There are two identical frames, one hidden, so it is clearly not an issue with them being fixed, or vh settings, because the top one still works, it is that when the frame is initially hidden, then you click the menu button, the animation is somehow cancelling out the scroll.

I would set it back to scroll as part of the animation steps but I can’t seem to find a setting inside the animation panel to reset this property.

Test it and see for yourself, the second frame (bottom right) is hidden until you click the menu button.

Interestingly enough, the scroll still works in the Webflow preview mode, and I have just found out it works in Google Chrome and Firefox, so it seems it is a Safari issue.

What browser did you preview in?

Thanks Graham

8

Graham,

I’m sorry, I don’t understand what it was you were or are trying to do. I had what I thought you wanted in Chrome, but now I can’t do it over because settings have changed drastically and following your original link the menu is in a horizontal scroll. I guess I didn’t even understand what you wanted in your original post. Perhaps someone else here can help you… a fresh pair of eyes.

Best of luck,
~B.

9

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