CSS help for awkward responsive layout

Hi everyone,

This is my first post on the forums. I need advice for a site I'm working on, I'm still a noobie and this is my first client. I've been struggling with this layout for a few weeks, practically rewrote the site numerous times and can't get the elements to play well with one another.

The site needs to be responsive and I can't make changes to the layout as the client is very specific with the way it must look. I've spoken to the client about issues with the layout, but they insist I keep trying until I get it to work.

I believe the layout is do-able, it may just be my own lack of knowledge and skills which is causing issues. Could any of you industry veterans please help me?

Here is an image of the layout:

 

Site in the browser as is.

 

And how, exactly, is this supposed to change to fit smaller screens? Which elements can be condensed / moved? If there isn't room on the page, there isn't room on the page. You can't change that. So SOMETHING needs to be allowed to change - it is not possible to have everything available on smaller screen sizes, at least not while looking like that.

 

I realized that quite quickly on after the first two versions. The header and the sidenav are the biggest culprits. The logos on the sides has margins, the spinning center logo has another image underneath, so trying to make it responsive is a nightmare, even when hiding/collapsing elements on smaller devices. The sidenav also poses issues, even when changing it with media queries. All css is written from scratch in the image posted. Same issues with frameworks I've tried, bootstrap 3+4 alpha, Pure CSS, W3.css. It's easier just to build from scratch. I think i'll have to sit down with the client again and walk him through the coding issues.