Responsive Nav Bar issue with positioning and responsiveness

Hi, I’m sort of stuck on something new to me that a client is requesting. They want their menu items spaced around the image in their header like the attached photo. I’ve got the image responsive, but the nav bar doubles up on itself at a certain point before the breakpoint for tablet.

Is there a way to lock the nav bar in place over the image, and have the image and the nav bar scale together until the tablet breakpoint?

Also, is there a simple way to remove that white space below the blue bar and dogs?

Any help is appreciated.

Thank you,
Mike

https://preview.webflow.com/preview/franco-hub?utm_medium=preview_link&utm_source=designer&utm_content=franco-hub&preview=535d0295f7730f3726630ca59e7dc3c4&workflow=preview


Here is my site Read-Only: [LINK](Webflow - PAW Patrol Hub - Kids Bedding and Bedroom Accessories)
(how to share your site Read-Only link)