Eric thank you again for taking the time to help me, I truly appreciate it!
I did exactly like you said, first I removed the min-height 164px, removed the line of code height 77px then I adjusted this:
.header-image .site-header .widget-area {
padding: 10px 0;
padding: 1.0rem 0;
The nav is back into the blue area on the phone and iPad. I only have one curiosity left if you could answer it please:
Why is it that I had to modify the css this way to make it look like the demo but the css in the demo is different?
Meaning, in the demo the height of the header is small indeed in the css Wes keeps the min-height to 164 and neither he had to adjust the padding rem in the line above, what makes the difference?
Thank you again Eric, I appreciated your help!