Module is stuck behind header. I need the header to push it down. Any ideas?

[#1]

I can't figure it out. And then in mobile mode it goes over the top of the module below instead of pushing it down. Thanks for any help

https://frameworkrecovery-4915095.hs-sites.com/

[#2]

@ejtomlinson,

Can you move the nav into the header section of the template?

[#3]

Thanks for the response, just tried that and it didn't work.

[#4]

@ejtomlinson, because the nav is fixed, it has been removed from the flow.  you will need to add a margin to the body-container-wrapper to compensate for this.

you can add a script that can calculate it

<script>
function moveIt(){
  let navHeight $('.nav-wrapper').height() - $('.header-container-wrapper').height();
  $('.body-container-wrapper').css('margin-top', navHeight +'px');
}
$(document).ready(function() {
    moveIt();
});
$(window).resize(function(){
  moveIt();
})
</script>

that will get the height of the header and add a top margin to the body and should adjust with window resizing

[#5]

Sorry to ask this, but where would the best place be to insert the script?

[#6]

@ejtomlinson,  really depends.  I would add to the any template that has this specific issue.  I would not add to a js file that it referenced on all pages as it appears this problem is not universal. 

When editing a template, you should see an option on the right to edit the footer html.  you can add there

[#7]

I didn't see the footer option when editing the page template so I added it to the "body" it didn't work, so I then added it to the footer html in settings but to no avail.