The illustration above IS what I want it to look like. My custom code isn't working for some reason. I'm asking for your help in finding the solution.
The gray header you managed to make the right height on small screens, but when you look at other screen sizes, it expands, and I don't want it to expand as a gray bar, only as the full desktop size, with the larger logo.
The masthead background image is MUCH too tall on these smaller screens, when it's not the background for the header. I would like it to look like the illustration above also.
The off-canvas-toggle also still wanders around a bit, and I'd like it to be where it appears in the illustration above anytime it's on the screen. (Side note: it seems to also appear on larger screen sizes when the megamenu is visible, which is redundant. If the normal menu is visible, I'd like the off-canvas-toggle to go away.)
Mostly, I just want the background to appear behind the header on very desktop displays, as it does now, and reduce in height to the size of the illustration above when displaying the gray header.
Make sense? I thank you for your help. Change anything in my custom.css you need to to make this work. I've tried so many different things, and none of them are getting me what I want. I'm sure there's a bunch of custom work in there that's wrong or redundant. I have a backup on my hard drive. Edit as needed, please.
