Solved How to overlap header onto first section of body content and how to control the size once sticky?

Hi everyone, hope you're doing well. I've already read every answered version of this question I could and tried all the solutions I've seen but to no success. My site is currently on private but I can provide access if needed. I'm attaching two photos. The first is an image showing how there's a white block of space that persists behind the non-full-width header that I can't get to go away no matter how many solutions/workarounds I try. In one of the prior posts I read that this capability wasn't possible at the time, but I'm hoping by now it is. I'm sure there's a way to make it work considering it looks how it should as far as how it overlaps content once you scroll. That's the first question. The second question is, I need both levels of the header to shrink in width by half when it becomes sticky as I scroll down. Right now it stays the same size when I scroll down (see second image) except for the logo, which shrinks but doesn't shrink the row along with it. Please see attached photos for reference. I've spent a lot of time trying to figure these two things out so any help is appreciated. Thank you!!

 

Thank you for the prompt response! So for the white space behind the header, at first the code snippet didn't work but then I added the line "margin-top=-100% !important;" and it worked perfectly so thanks!

As far as the second issue, I'm not getting any change when I do that, when I scroll only the logo changes in size. I've tried adding the free-sticky class to both the top and bottom sections as well as experimenting with some of the other classes with no luck. I attached what the structure of my menu. How should the CSS class list read for each of the two sections? (and should only the sections get the classes assigned or the internal rows/modules as well?) Appreciate any ideas and thanks again for all your help!

 

It looks amazing thank you so much!!!

Alex