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

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.