Have the logo overlap outside of header

Hi!
after searching the web and not finding solution, i really need help.
i want to make my logo overlap the header and stay that way when i do sticky header and people scroll the page.
Im using Astra Theme and elementor pro.
What i tried to do is Fixed Custom Positioning to the logo and then put it the way i want.
the problem is, when i do so, the header gets crazy and not everything becomes sticky.
i also tried to give it a negative external mergin and still doesnt help.

here you can see what heppens https://ibb.co/db2Yvd5
and this is how i want it to look like all the time even when i scroll down.

could you help me with that?

The page I need help with: [log in to see the link]