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

Occasional Contributor

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/

Reply
0 Upvotes
6 Replies
Regular Advisor | Platinum Partner

@ejtomlinson,

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

 

dennis
Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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

dennis
Reply
0 Upvotes
Highlighted
Occasional Contributor

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

Reply
0 Upvotes
Regular Advisor | Platinum Partner

@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

dennis
Reply
0 Upvotes
Occasional Contributor

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.

Screen Shot 2018-12-05 at 11.49.50 AM.jpg

Reply
0 Upvotes