Need help layering header logo & nav bar in responsive design

Is there a way to make layered elements STAY PUT (in relation to each other) when using a responsive design?

Working on a site that uses an logo image as the header. I positioned the nav bar to overlap part of the logo image. However, I can’t seem to figure out how to make it stay in place over the header image when the window is resized or the site is viewed on a mobile device.

I’m using Woo Themes’ Mystile theme. You can see a sample page here:

https://thepartydarling.com/policies/

Password is: [Redacted by a moderator – Please make your site public instead of making your password public]

I used one <div> to add the Logo image to the header.php and another <div> to add the social media buttons (also to header.php). I’ve been using CSS to position the nav bar, and z-index to layer the elements.

Everything is layered the way I want it, but the positioning changes if the screen is resized. Is it even POSSIBLE to make layered elements keep their position? Is there a work around that I’m missing?

(Happy to post code snippets, just let me know if I need to do so from header.php or the CSS.)

Thanks in advance!!