Help Needed: Footer and Header Issues, Background Not Loading on Squarespace

Hi everyone,

I'm experiencing some issues with my Squarespace website, specifically with the footer, header, and background. Here’s what’s happening:

Problems:

1. Footer and Header: The footer and header on my site are not displaying correctly. The footer looks like a mess, and the header isn’t functioning as it should.
2. Background Image: My background image isn't loading, even though the code seems to be in place.

Code Details:

• Footer Code Injection:

  <script>
document.addEventListener("DOMContentLoaded", function() {
    var backToTopButton = document.getElementById("back-to-top");

      window.addEventListener("scroll", function() {
        if (window.scrollY > 300) {
            backToTopButton.style.display = "block";
        } else {
            backToTopButton.style.display = "none";
        }
    });
    backToTopButton.addEventListener("click", function(event) {
        event.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});
</script>

  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/gh/willmyethewebsiteguy/sliderFree@3.0/javascript.min.js"></script>

• Custom CSS:

  /* arrow width & edge - banner*/
.user-items-list-banner-slideshow__arrow-icon-path{
stroke-width:3px;
stroke-linecap:square;
}
/* arrow width & edge - carousel*/
.user-items-list-carousel__arrow-icon-path{
stroke-width:3px;
stroke-linecap:square;
}

  /* naviation line*/
body:not(.header--menu-open) .header-nav-item--active>a {
  background-size: 1px 2px;
}
/* naviation line mobile menu*/
.header-menu-nav-item--active .header-menu-nav-item-content {
    background-size: 1px 3px !Important;
}
/* back to the top bottom*/
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: none;
    background-color: #005082; /* Deep Ocean Blue */
    color: #F0F5F9; /* Cold White */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#back-to-top svg {
    width: 24px;
    height: 24px;
    stroke: #F0F5F9; /* Cold White */
}
#back-to-top:hover {
    background-color: #00CED1; /* Aqua */
}

  
  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
    section[data-section-id="66ba8dfd4037f741b631a51d"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
    section[data-section-id="668eb77dafe0d00e093d2f3b"]{
      display:none;
    }
  }
}
/**
* Blur Hover Services Section
**/
section[data-section-id="66ba54667ee8855b3a8d5e7a"] ul {
  --hover-scale: 103%;
  --hover-opacity: 1;

    li {
    position: relative;
    border-radius: 15px;
    border-width: 4px;
    border-style: solid;
    border-color: white;
    transition: scale 0.3s ease, opacity 0.3s ease;
    transition-delay: 0s !important;
    overflow: hidden;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.05); /* Fallback for unsupported browsers */
    backdrop-filter: blur(5px); /* Apply the blur directly to the li element */
    -webkit-backdrop-filter: blur(5px); /* For Safari */
  }

    li * { /* Targets all child elements of li */
    position: relative;
    z-index: 2; /* Ensures content is above the blurred background */
  }

    @media(min-width: 767px) and (hover:hover) {
    li:hover {
      scale: var(--hover-scale, 105%);
    }
    &:hover li:not(:hover) {
      opacity: var(--hover-opacity, 0.7) !important;
    }
  }
}
/* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
    section[data-section-id="66ba90e81e76b002fc88290e"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
    section[data-section-id="668eb77dafe0d00e093d2f62"]{
      display:none;
    }
  }
}

  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
    section[data-section-id="66ba93074037f741b6331025"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
    section[data-section-id="669fa7a7b13cf329eab2e9bb"]{
      display:none;
    }
  }
}

  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
   section[data-section-id="66ba95552cde7f4af84adf48"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
   section[data-section-id="66ba54667ee8855b3a8d5e79"]{
      display:none;
    }
  }
}

  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
    section[data-section-id="66baa8de6d8b752ee1ddf4de"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
   section[data-section-id="66ba9a1129a79a1ddbdfc07b"]{
      display:none;
    }
  }
}

  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
    section[data-section-id="66baa8bd730f4d7b3360c296"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
   section[data-section-id="66ba9a1129a79a1ddbdfc07b"]{
      display:none;
    }
  }
}

  /* Visability sections*/
body:not(.sqs-edit-mode-active){
  @media(min-width:768px){
    /*Mobile Section*/
   section[data-section-id="66baab353ca11e181238c44b"]{
      display:none;
    }
  }
  @media(max-width:767px){
    /*Desktop Section*/
   section[data-section-id="66ba54667ee8855b3a8d5e7a"]{
      display:none;
    }
  }
}

• Advanced Page Code Injection:

  <style>
.site-wrapper {
background-image:url(https://static1.squarespace.com/static/668eb77441ae590488ca9b3b/t/66b030c99d563849e3d805e8/1722822860390/fundo+4.jpg);
background-size: cover
}
.page-section .section-border, .page-section .section-background{
background:transparent!important;
background-color:transparent!important
}
</style>

  <script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
      gallery: 1,
      direction: 2,
      timing: 3000,
    });

      function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

          function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")  && !document.querySelector("body.header--menu-open")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

          window.setInterval(clickArrow, settings.timing);
      }
  window.addEventListener("DOMContentLoaded", init);
    }
  })();
</script>

  <script>
    /**
    *  Gallery Section Auto Scroller Mobile
    **/
  (function () {
    setAutoScroll({
      gallery: 2,
      direction: 2,
      timing: 2000,
    });

      function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];

          function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")  && !document.querySelector("body.header--menu-open")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }

          window.setInterval(clickArrow, settings.timing);
      }

   window.addEventListener("DOMContentLoaded", init);
    }
  })();
</script>

  <style>
.gallery-reel {
  height: clamp(75px, 25vw, 100px) !important;
  padding: 17px 0px !important;
}

• HTML Code Block in Footer:

  <div id="back-to-top"> <a href="#top"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up" viewBox="0 0 24 24"> <path d="M18 15l-6-6-6 6"/> </svg> </a> </div>

What I’ve Tried:

• I've double-checked the code for any errors but couldn’t identify anything that might be causing these issues.
• I’ve used the developer tools to inspect the site, but I’m not seeing any clear errors that point to the problem.
• I also am really new to coding, it my first gig so... i dont really know alot yet

Request:

Could someone please help me identify what might be going wrong? I suspect there might be an issue with how the scripts or styles are being applied, but I'm not sure how to resolve it.

Thank you in advance for your help!

Can you share site url? We can check problem easier