Overlap navbar brand image

Im trying to create a nav bar that looks like the one in the image i am attaching. Im trying to put a negative margin on the bar so that the brand image can over lay the bar and i can get the point dropping down.


Here is my site Read-Only: https://preview.webflow.com/preview/34-north?utm_source=34-north&preview=962a35dbfb31d2817776af56e551cbe9
(how to share your site Read-Only link)

And your question is?

Ive tried to put a negative margin on the the navbar and the container, both havnt worked. My question is how to do i get the overlap effect with the brand image that i have provided.

Sorry in advance, im very new to webflow and this is my first site with it.

Can you please share your read-only link?

edited the original post with it

Set the following parameters for your container 4:

14%20AM

Can you explain why that needs to be set like that? just for learning purposes

1 Like

You are positioning your elements with the flex property. You may learn about that here.

Is there a way to make the image point in the middle stay perfectly in the middle regardless of the how long the navlinks get?

Sorta like this. Not the most elegant solution but its a quick idea.

yes like that but what if there are 4 nav links on one side and 3 on the other. I want to make sure the red circle always stay centered.

You can try it in the read-only I provided. Spoiler: it will stay in place :slight_smile: