Vertical Nav vs. Footer BG color

The site is unpublished, so can’t send the link. But I’ve dropped in some CSS to make the header and navigation block static on the left side, showing the logo at the top and a hamburger menu at the bottom at all times. Three things I need help with:

- when you scroll to the footer, which has a black background, the navigation retains its own background color, creating a weird cut-out looking shape to the left of the footer. I’d like for the portion of the left side nav that intersects with the footer to take on the colors of the footer dynamically. So when you scroll to the bottom, the nav block that has been grey the whole time with a black hamburger menu, changes to black BG with white hamburger menu to match the style of the footer. Worth noting that the code already shows footer at 100%.
 

- When this code is in place, I cannot edit/add to the other sections because the code interferes with the squarespace interface. Anything to be done about this?

- What I really want is the header section to be along the left side, but the whole block rotated 90 degrees, so the text is sitting on its side, bottom aligned with the left margin of the rest of the site. I’d like to include location and contact information here, so it’s visible at all times. 

You can follow this to share url, we can check easier.