Prevent sidebar overlap when resizing browser

[vramadhan (Vania Ramadhan)]

Hello! I am new to Webflow and have generally gotten by using older forum posts, but for the life of me cannot figure this one out.

I’m trying to create a side navigation bar, but when I resize the browser, the sidebar overlaps with the main text content. I think this has something to do with using position:fixed but using position:sticky does not resolve the issue.

Notably, the sidebar does not overlap on the images/the images resize with respect to the sidebar.

It looks okay on desktop breakpoint.

Viewport reduced to 1158px and there is overlap.

I’ve tried putting the whole thing into a container, to no avail. I would greatly appreciate any help on this!

Edit: please excuse my class naming system (or lack thereof)

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[alexissilva]

Hi!

If this navigation is regarding the “playpage text section” section, I would suggest:

1 - Wrap all containers of the section inside of a div block called “containers-wrapper” and wrap the component “side nav bar” into a div called “side-bar-component_wrapper”

2 - Change the section “playpage text section” to position “relative” (So all absolute or sticky elements will be relative to the section) and display “flex” with 0 gap.

3 - Change the padding-top of the “side nav wrapper” component to 4rem and set the position to static

4 - Set the “side-bar-component_wrapper” position to “sticky” with top “0”

This should works!

If it works, set this comment as solution and connect with me on Instagram and you are free to ask if you need more help in the future
https://www.linkedin.com/in/alexis-matos/

[vramadhan (Vania Ramadhan)]

Thanks for the help! Sticky position didn’t work at first, but I set “side nav wrapper” to sticky and everything works!