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!
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:
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.
Create a new div and put inside of it both the Nav buttons and the Project info.
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.
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!
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