I’m trying to create a layout similar to this: http://marquee-demo.squarespace.com/#about-marquee
I can’t seem to figure out how to have the arrow pointing down to not overlap the logo above it. Any suggestions?
https://preview.webflow.com/preview/onyx-interiors?preview=814a6415f5a346ca070f334a21ade25c
Because your section Main section has no positionning declared, the arrow element can’t use it to position itself. So it looks up in the hierarchy and positions itself regarding the Body element. So your arrow position is not relative to the Main Section elment.
Give the property position:relative to the Main Section element; then the arrow will stay at the end of the section… if that’s what you want.
Thanks @vincent . That makes sense but do how I make the arrow pinned to the bottom so when I minimize the height of the window, it still remains visible? Similar to this template on Squarespace: http://marquee-demo.squarespace.com/#about-marquee I also don’t want it to overlap the logo above it.
Ah ok.
You’re almost there but need to rework a bit your structure.
Place the arrow in the section, and the section position:relative, so the arrow sticks to the bottom of the section.
Give the body element height:100%. Give your main section height:100%.
As your logo don’t move, there is no way to prevent the arrow to overlapp the logo when the section height (browser height) gets too short. So instead, define a min-height for the main section, so that it stops shrinking before the arrow overlaps the logo.