CSS issues since moving to 7.1

So we upgraded www.mallettspallette.co.uk to Squarespace 7.1.

This is what the header used to look like

 

And this is the code which I believe made the brush strokes of the header happen:

/*header brush effect and gradient overlay */
  #brush {
    display: inline-block !important; 
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    background: url("https://static1.squarespace.com/static/5dd0d49ffcb3826c703c9a27/t/5df30262ca514d7fda10a7d8/1576206946269/svg-overlay.svg"),
      linear-gradient(to right, rgba(56, 56, 56, 0.6), rgba(56, 56, 56, 0));
    background-size: 105%;
    background-repeat: no-repeat;
    background-position: -2px 101%;
    background-color: transparent;
  }

However, when you go to https://mallettspallette.co.uk the CSS has stopped working.

Any ideas why?

35 minutes ago, IDS said:

And this is the code which I believe made the brush strokes of the header happen:

/*header brush effect and gradient overlay */
  #brush {
    display: inline-block !important; 
.....

Hi, between 7.0 and 7.1, the html has likely changed. There is no #brush class in Squarespace, so this must have been a custom code, added using Javscript. Is there code in your Code Injection that adds the class "brush"?

 

Edited March 1 by melody495

Not in the header code injection section of SS ironically, but this is the footer code injection section:

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  /* checks if this is a touchscreen for hover behavior */
  function isTouch() {
    return (('ontouchstart' in window) ||
      (navigator.MaxTouchPoints > 0) ||
      (navigator.msMaxTouchPoints > 0));
  }

  //facilitates top nav styling on scroll
  var controller = new ScrollMagic.Controller();
  var scene = new ScrollMagic.Scene({
      triggerElement: "div.Site-inner",
      triggerHook: 'onLeave'
    })
    .setClassToggle("header.Header--top", "nav-toggle")
    .addTo(controller);

  //inserts brush effect   <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
  $("section.Intro").append('<div id="brush"></div>');

  //sets home page item overlay
  var imageNum = 0;
  $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
    var itemTitle = $(this).find("img").attr("alt");

    var color;
    switch (imageNum) {
      case 0:
        color = c.homeGridItemOne;
        break;
      case 1:
        color = c.homeGridItemTwo;
        break;
      case 2:
        color = c.homeGridItemThree;
        break;
      case 3:
        color = c.homeGridItemFour;
        break;
      case 4:
        color = c.homeGridItemFive;
        break;
      case 5:
        color = c.homeGridItemSix;
        break;
      default:
        color = c.homeGridItemOne;
    }
    imageNum += 1;

    $(this).append("<div class='item-overlay' style='background-color:" + color + "'><span>" + itemTitle + "</span></div>");

  });

  //item hover effect on home page
  if (!isTouch()) {
    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseenter(function() {

      var insertedElement = $(this).find(".item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper").mouseleave(function() {
      var insertedElement = $(this).find(".item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  //sets blog page item overlay
  $("section.BlogList a").each(function() {
    var itemTitle = $(this).find("img").attr("alt");
    $(this).append("<div class='blog-item-overlay'><span>" + itemTitle + "</span></div>");
  });

  if (!isTouch()) {
    //item hover effect on blog page
    $("section.BlogList a").mouseenter(function() {

      var insertedElement = $(this).find(".blog-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("section.BlogList a").mouseleave(function() {
      var insertedElement = $(this).find(".blog-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  //sets gallery page item overlay
  if (c.galleries.includes(window.location.pathname)) {
    $("a[class*='image']").each(function() {
      $(this).css("position", "relative");
      var itemTitle = $(this).find("img").attr("alt");
      $(this).append("<div class='gallery-item-overlay'><span>" + itemTitle + "</span></div>");
    });
  }

  if (!isTouch()) {
    //item hover effect on gallery page
    $("a[class*='image']").mouseenter(function() {

      var insertedElement = $(this).find(".gallery-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 1
      });
    });

    $("a[class*='image']").mouseleave(function() {
      var insertedElement = $(this).find(".gallery-item-overlay");
      gsap.to(insertedElement, {
        duration: 1,
        opacity: 0
      });
    });
  }

  function banners(slug) { //gets list of gallery urls for banner
    //inserts arrows
    $("section.Intro").append('<div onclick="slideLeft()" id="left-carousel-arrow"></div><div onclick="slideRight()" id="right-carousel-arrow"></div>');

    //styles arrow icons
    gsap.from("#left-carousel-arrow", {
      duration: 3,
      opacity: 0,
      x: -200
    });
    gsap.from("#right-carousel-arrow", {
      duration: 3,
      opacity: 0,
      x: 200
    });

    //sets banner gallery

    data.items.forEach(item => imgUrls.push(item.assetUrl));

  }

  var imgUrls = [];
  var slug = window.location.pathname;
  slug = slug.replace("/", "");
  if (slug == "") {
    slug = "home";
  }
  var dataUrl = "/" + slug + "-banner-gallery/?format=json-pretty";

  var data;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      data = JSON.parse(this.responseText);
      if (c[slug] != false) {
        banners(slug);
      }
    }
  };
  xhttp.open("GET", dataUrl, true);
  xhttp.send();

  //get original background
  var originalImg;
  var imageLoaded = false;
  //changes slideshow image
  var counter = 999;

  function slideLeft() {
    if (!imageLoaded) {
      originalImg = $("figure.Intro-image > img").attr("src");
      imageLoaded = true;
    }
    if (counter == 999) {

      counter = imgUrls.length - 1;
    } else if (counter == 0) {

      counter = imgUrls.length;
    } else {
      counter -= 1;
    }
    if (counter == imgUrls.length) {
      $("figure.Intro-image > img").attr("src", originalImg);
    } else {
      $("figure.Intro-image > img").attr("src", imgUrls[counter]);
    }

  }

  function slideRight() {
    if (!imageLoaded) {
      originalImg = $("figure.Intro-image > img").attr("src");
      imageLoaded = true;
    }
    if (counter == 999) {

      counter = 0;
    } else if (counter == imgUrls.length) {

      counter = 0;
    } else {
      counter += 1;
    }
    if (counter == imgUrls.length) {
      $("figure.Intro-image > img").attr("src", originalImg);
    } else {
      $("figure.Intro-image > img").attr("src", imgUrls[counter]);
    }

  }

  //strava icon in footer
  $("nav.sqs-svg-icon--list").append(
    '<a href="https://www.strava.com" id="strava-icon"><div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path id="strava-path" d="M15.387 17.944l-2.089-4.116h-3.065L15.387 24l5.15-10.172h-3.066m-7.008-5.599l2.836 5.598h4.172L10.463 0l-7 13.828h4.169" fill="#fff"/></svg></div></a>'
  );

  //takes care of hover behavior on mobile
  if (isTouch()) {
    var homeItems = [];
    var galleryItems = [];
    var blogItems = [];

    //home items mobile behavior
    $("#block-yui_3_17_2_1_1573968485496_3807 div.slide .margin-wrapper a").each(function() {
      var redirect;
      $(this).attr("id", $(this).attr("href"));
      $(this).removeAttr("href");
      var link = $(this);
      $(this).click(function() {
        if (redirect) {
          var redirectUrl = link.attr("id");
          gsap.to(link.find(".item-overlay"), {
            duration: 1,
            opacity: 0
          });
          redirect = false;
          window.location = redirectUrl;
          return;
        }
        gsap.to(link.find(".item-overlay"), {
          duration: 1,
          opacity: 1
        });
        redirect = true;
      });
    });

    //blog items mobile behavior
    $("section.BlogList a").each(function() {
      var redirect;
      $(this).attr("id", $(this).attr("href"));
      $(this).removeAttr("href");
      var link = $(this);
      $(this).click(function() {
        if (redirect) {
          var redirectUrl = link.attr("id");
          gsap.to(link.find(".blog-item-overlay"), {
            duration: 1,
            opacity: 0
          });
          redirect = false;
          window.location = redirectUrl;
          return;
        }
        gsap.to(link.find(".blog-item-overlay"), {
          duration: 1,
          opacity: 1
        });
        redirect = true;
      });
    });

    //gallery items mobile behavior
    $("a[class*='image']").each(function() {
      var overlay = $(this).find(".gallery-item-overlay");
      gsap.to(overlay, {
        duration: 10,
        opacity: 1
      });
    });

  }
</script>

Superstar, thank you.  Any idea on the footer please? 🙂

On 3/6/2024 at 3:08 AM, IDS said:

Superstar, thank you.  Any idea on the footer please? 🙂

Use this under

<script>
  $(document).ready(function(){
  	$("footer.sections section:first-child").append('<div id="brush"></div>');
  });
</script>

 

Thank you, how would I turn that effect on the bottom footer upside down please if you don't mind? 🙂

 

You mean move effect to top of footer?

Yep exactly.