Full Height Header vs. Fixed Height Header

Motif comes with 2 headers: a full height header that fits the height of the browser window, and a fixed height header that is 400px tall by default (this can be overridden in the customizer).

The nav bar is displayed below the full height header, but using the Sticky Panel javascript it automatically sticks to the top of the page in a fixed position when you scroll to the point where the nav bar is at the top of the page.

The nav bar is displayed above the fixed height header, and it sticks to the top of the page in a fixed position.

Both headers have the same background colors, text colors, and background image (optional - set in the customizer).

The intent of having 2 headers is to let you choose which one to use on any given page. It was not intended for you to use both, though that is possible with this theme. There is a "Top Section" area above the "Main" area that you can use in conjunction with the header you choose. This is the recommended approach.