Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
aishaeady

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

Question


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/

Screen Shot 2020-01-10 at 4.41.29 PM.png

Screen Shot 2020-01-10 at 4.41.56 PM.png

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 2

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>

 

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...