Want fixed side nav next to scrollling page

Hello,

On my ‘Indigenous Education’ page I would like to have a fixed side navigation, next to a scrolling section. Scrolling only works when the .indigenouspage is set to overflow scroll, but then I can’t have any fixed elements in the page. When I change the .indigenouspage back to overflow visible, the nav is fixed but I can’t scroll anymore. Help! Thanks :slight_smile:

Here is my site,

Click ‘View Work’ and then the ‘Indigenous Education’ project.

https://preview.webflow.com/preview/kims-first-project-1c7a78?preview=87fd6bc9b7ef92bd508ca274c454c66f

I saw the page, but its hard to know where is the problem (This is interaction problem? CSS?)

Anyway try this trick/consept:

Maybe add working reference like this one:
https://stackoverflow.com/questions/13337646/scroll-inside-of-a-fixed-sidebar

1 Like

Thank you! It was actually quite a simple fix – the solution was still using overflow scroll, but in a different element.

Just a quick comment, the “Building a Fixed sidebar with flexbox” is good to create a fixed sidebar layout, but if you want smooth scrolling also, then you would need to put the fixed nav under the body, and the individual sections under the body, or at least not within a parent element having overflow scroll.

I like to create a fixed nav panel, lets say 100px, then put individual sections with a global section class assigned to the sections, and placed directly under the body, with a left padding equal to the width of the fixed nav (whatever value you wanted).

https://webflow.com/website/Fixed-Sidebar-Navigation-Example

I hope this helps.

2 Likes

This could actually be a great fix for me, I have put my divs into pages and removed my swipe interactions. I’m going to try the side bar as a proper navigation this time. Thank you for the help and the example!

Yay! Thank you SO much. http://collectionbykim.com/indigenous-education

Beauty :slight_smile: Looks great @_kim :slight_smile: