Positioning Multiple Elements

How can I achieve this type of element positioning AND have it scale up/down? I can’t solve this one. :confused:

Attached image of it at a smaller scale, how the items should be positioned. As it scales bigger each item kind of falls away from each other…

https://preview.webflow.com/preview/astral-v4?utm_medium=preview_link&utm_source=designer&utm_content=astral-v4&preview=dad33ee9e53a405fa4c44ca395e433f3&pageId=62231b7dede3d7ac4f598b3d&workflow=preview


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

Update - I fixed the positioning for the most part. The image and the content block along with the triangle all work and scale together now except the text block (shown with the pink bg fill) as the page scales down from 2060px to smaller screens, it wraps down and flows too much over the triangle/text area. This is likely something simple I am missing but can’t seem to see what I’m overlooking. Can anyone help with this?

Hi @nimoyandpizza I have now checked your navigation and you have completely mess up its setting. It will be IMO better when you use a new one as fixing this will take you a lots of time.

@Stan That sounds about right!

I built the links out so I could add the underline animation on hover. The prebuilt navbar I couldn’t add the animation to for some reason. I’ll toss it and just do without the underline I guess?

you have changed elements positioning from absolute to relative or static and vice versa etc. It will be really easier to just create a new in few minutes as your nav is very simple .

Underline is simple too.

The element position was changed to make the navbar transparent/see the hero image through nav. Will start with a new navbar - what is the proper way to make it transparent?

if you will have time we can have Zoom call