Sticky header overlap main content in Ready Template (FIrefox Only)

Hello! I'm working on my client's site on the Ready template. I'm having issues with the logo in the header (upon scrolling overlapping) over the text on the rest of the page. Is there any way to ensure the sticky header doesn't overlap the main content? Toggling the Site Styles "Header Background When Scrolled" on/off doesn't seem to help.

When I chatted with Squarespace Support, I was told the issue could be because of the size of the logo. I'd like to keep the logo at its current size, though. Please note that the problem seems to only appear in Firefox. Thank you!

https://www.dearhuman.pet/

I wouldn't say it's an issue with the logo. There's what's called a "race condition" (as in two JavaScript functions racing against each other) being caused between how Firefox is loading the header content and the "SyncHeader" function in the Bureau template family. Firefox is just a little slower (possibly due to flexbox-related calculations, but I'm not sure) and so the height is being calculated too soon.

This is probably fixable by recreating the gist of the function from Squarespace's own code, then running it a little later.

Insert the following via sitewide Header code injection:

<script>
  // Fix header height on init. load in Firefox.
  window.Squarespace.onInitialize(Y, function() {
    document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px";
  });
</script>

If that doesn't fix it, try this one instead of the one above:

<script>
  // Fix header height on init. load in Firefox.
  window.addEventListener('load', function () {
    document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-page").style.marginTop = document.querySelector(".site-header").offsetHeight + "px";
  });
</script>

Let me know how that works for you.

-Brandon

-------------------------------------

EDIT 4/29/2020

For some, the following may work best (it really depends on your template configuration, which can be different for everyone).

<script>
  // Fix header height on init. load in Firefox.
  window.addEventListener('load', function () {
    document.querySelector(".nav-close-toggle-wrapper").style.height = document.querySelector(".site-header").offsetHeight + "px";
  });
</script>

Thank you so much for your help, @brandon! The second fix worked perfectly.