Streaming live at 10am (PST)

Preventing Fixed Object Overlap

#1

Hello, my problem is divs overlapping as you can see here:


I’ve been trying to find different solutions to this with no success yet. All the project related content on the page is in a “project” div, and within that there are divs “project info” “project images” and “project nav.”
I want the “project info” and “project nav” to stay fixed in the current positions but stop them from overlapping with “project images.” Any pointers much appreciated!


Here is my site Read-Only: ** https://preview.webflow.com/preview/natalieheaman?utm_source=natalieheaman&preview=3f09082dadac41dd7be6bdb3f81fefc6 **

0 Likes

#2

It took me a lot of testing, and it’s a shame I can’t copy your website and share what I’ve made. Anyway, I’m gonna give you some hints about the process:

  1. Make relative everything that you made fixed or absolute. (A lot of your divs had that setting and it didn’t seem to have a purpose. Being set as absolute or fixed cause elements to not obey to flexbox positioning
    a) Also, disable the auto margin that you put on your elements. That’s not helping you.

  2. Create a new div and put inside of it both the Nav buttons and the Project info.

91

  1. Use flexbox so you can space your elements correctly.

I’ll let you figure out the rest, because it would take me a lot of time to explain all the other minor steps. But it’s fairly easy to see what need to be done next.

Here’s the final result:

You can also make the Div created on STEP 2 sticky, so the navigation is always accessible.

Good luck with your project

0 Likes

#3

Thank you, much appreciated! I’ll fiddle from here but that seems to do it.

1 Like

#4

I’m glad to know I was helpful. Make sure to send me a message if things don’t work out . I’m here to help!

Have a great day!
Let me know if it works

0 Likes

#5

I’ve nearly got it how I want it now, but I was wondering if you could elaborate on how to make the div sticky? I thought the only way (besides custom code) was to use absolute or fixed positioning? Thanks!

0 Likes

#6

No problem.

Select the div, go down to position and chose sticky. You need to specify a value, either from the top or from the bottom. It can be 0, but it must be specified.

If for some reason the sticky option is not appearing, make sure to use the new style panel

I hope it helps. Let me know how things go

0 Likes

#7

Ah I see I was on the old style panel. I set it to sticky but it doesn’t seem to be effecting the div at all.

Am I missing something?

EDIT: Turns out it was effecting all viewports BUT the desktop, though I was editing it on desktop mode. I’ll keep fiddling.

0 Likes

#8

Hello Natalie. Please, have a look at this video:

There might be some kind of setting that you’re missing out. I currently don’t have my computer on me, so I can’t check the preview version.

0 Likes

#9

No worries, I’ll check that out. Thanks so much for all your help!

0 Likes

#10

No problem at all. PM me so we can keep working on this if you don’t figure it out

0 Likes

#11

The problem was because it is not a direct child of the body. I’ll see if I can find a work around. Thank you!

0 Likes

#12

Problem solved. You simply need to change the Align of the Flexbox of the “Project Section” from STRETCH to Start

0 Likes