I've done something to my website with custom CSS & lost the social links on the mobile menu. Can anyone help?

I've done something to my website with custom  CSS & lost the social links on the mobile menu. Can anyone help? The links are there on the bottom left of the mobile menu however they are hidden with a dark square?

photo attached and social links circled in blue

I've tried for hours to tinker with the site styles with no luck either

 

thanks very much if you can help

Danny

 

I have used the following code in CUSTOM CSS:

 

 @media only screen and (max-width:  767px) { #block-2205357a92763470b09e {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-679045001e3b48e3f2df {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-355ff33b2dcd33f16237 {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-yui_3_17_2_1_1706910118805_8504 {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-f7875dc49fd277900e86 {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-4f590f4581facd7888e6 {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-d2b1b4256dc5b15e737b {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-a1c3c22158ce736086fa {
  display: none;
  }
  
}

@media only screen and (max-width:  767px) { #block-946e567ce772aafec4b1 {
  display: none;
  }
  
}
@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(4) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9d2f3c3d16f65c0f44db5/1706676979215/Whatsapp+business+corrected+pink+for+site+header+96+x+96.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(4) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9dc6648f188483b5314ce/1706679398632/Whatsapp+business+pink+for+mobile+96+x+96.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

.sqs-svg-icon--list a:nth-of-type(4) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65b9dee0fbfe7578c05f3630/1706680032691/Whatsapp+business+white+96+x+96.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}
.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba73ac5ee37a0ba29612c0/1706718126934/facebook.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}
.sqs-svg-icon--list a:nth-of-type(2) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba74bc381e0b40427ddc8a/1706718398962/instagram.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}
.sqs-svg-icon--list a:nth-of-type(3) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba769885c10d43cd02f781/1706718875495/youtube.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(1) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba73ac5ee37a0ba29612c0/1706718126934/facebook.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(2) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba74bc381e0b40427ddc8a/1706718398962/instagram.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}
@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ba769885c10d43cd02f781/1706718875495/youtube.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}

body header#header a.icon {
    background-color: rgba(0,0,0,0.5) !important;
}

@media screen and (max-width:767px) {
.floating {
    right: 0px !important;
}
}

@media screen and (min-width: 768px) {
  .vertical-line {
  background: #FFFFFF;
  width: 1px;
  height: 200px;
  margin: 0 auto;
}
}

a {
text-decoration: none !important;
}

// CHANGE IMAGE OPACITY ON HOVER

#block-7b4e26a3d885c70d994d img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }

#block-7b4e26a3d885c70d994d:hover img {
        background: #000000 !important;
        opacity: 0.85;
        z-index: 0;
    }

#block-yui_3_17_2_1_1707137695036_70327 img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }

#block-yui_3_17_2_1_1707137695036_70327:hover img {
        background: #000000 !important;
        opacity: 0.85;
        z-index: 0;
    }

#block-7b4e26a3d885c70d994d img {
    background-color: rgba(0,0,0,0.9)
!important;
  border-radius: 22%;
  }

#block-yui_3_17_2_1_1707137695036_70327 img {
    background-color: rgba(0,0,0,0.9) !important;
  border-radius: 22%;
  }

// CHANGE IMAGE ON HOVER

  div#block-yui_3_17_2_1_1707137695036_45497 a:hover img {
    opacity: .7;
}
  div#block-yui_3_17_2_1_1707137695036_45497 a img {
    transition: all ease-in-out 0.5s;
    opacity: 1;
  }

div#block-yui_3_17_2_1_1707137695036_45497 a {
    background-image: url(https://static1.squarespace.com/static/62b48f8d9ab01b0e774f4bdb/t/65ca0c4110f5ea02e008fc6f/1707740236562/phone+3.png);
    background-size: cover;
    display: block;
}

 

 

 

 

 

 

I have used the following code injection CSS:

 

<!-- Styles your button (this is a black square with white text -->
<style>
.back-to-top {
    background-color: #000000;
    color: #FFFFFF;
    opacity: .1;
    transition: opacity .9s ease-in-out;
    z-index: 999;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 0%;
}
  
  a.back-to-top {
    font-weight: 1000;
    letter-spacing: 2px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
    padding-left: 2px;
    padding-top: 14px;
}
  
  .back-to-top.show {
       opacity: 1;
  }
</style>

<!-- Adds the back to top link to your website -->
<a href="#top" id="back-to-top" class="back-to-top" style="display: inline;">Top</a>

<!-- Fades in the button when you scroll down -->
<script>
 
  var link = document.getElementById("back-to-top");
  var amountScrolled = 250;

function addClass(el, className) {

    if (el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }

}

function removeClass(el, className) {
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');    
}
  
window.addEventListener('scroll', function(e) {
     if ( window.scrollY > amountScrolled ) {
         addClass(link, 'show');
     } else {
         removeClass(link, 'show');
     }
 });
</script>
<style>
  html {
  scroll-behavior:smooth
}
  
 p, body header#header, h1, h2, h3, h4 {

  a {

  transition: 0.8s !important;

 &:hover {

  color: rgba(175,175,175,0.3) !important;

    transition: 0.8s;
}

}

} 
  
  fadein img{
opacity:0.5;
transition: 1s ease;
}

.fadein img:hover{
opacity:1;
transition: 1s ease;
}

What are you trying to achieve with the custom css? It looks there are rules in there to hide the social icon svgs and you're trying to replace them with background image pngs?

There is script in there. That's not CSS. Move that to Code Injection before you try to evaluate any CSS issues.

11 hours ago, Nick_SquareKicker said:

Hi @goosbumps,

I've got your DM asking for some help.  I've had a look at your site and it just looks like you are missing a closing </style> tag at the end of your CSS in your Footer.  Without this, your SQSP code is breaking the SVG's on your site. You could move your CSS to your Custom CSS area so you don't need opening and closing style tags and just leave your Scripts in your Footer.

FYI - To reduce your code, you could do most of what your custom code is doing with SquareKicker then you won't have to worry about broken code messing up your site:  ie SquareKicker can hide your Social Icons in you overlay menu per screen size, has a built in Back to Top Button, hover animations, etc.

 

thankyou very much.. your suggestion of  closing </style> in the code injection area has indeed fixed this instantly.. I spent prob 4 or 5 hours yesterday tinkering with no success.. I cant thank you enough. Have you got paypal? I would be happy to buy you a beer.. Thanks sooooooooooooooo much.. Massive help

16 hours ago, e2astudio said:

There is script in there. That's not CSS. Move that to Code Injection before you try to evaluate any CSS issues.

thanks for your suggestion/time.. I  fully appreciate your effort in trying to help .. in the end the fix was missing a closing </style> tag at the end of your CSS in your Footer

10 minutes ago, goosbumps said:

thankyou very much.. your suggestion of  closing </style> in the code injection area has indeed fixed this instantly.. I spent prob 4 or 5 hours yesterday tinkering with no success.. I cant thank you enough. Have you got paypal? I would be happy to buy you a beer.. Thanks sooooooooooooooo much.. Massive help

Just happy to help.  I've been there more times then I can count. Writing code in Squarespace can be so nice and easy, but when things don't work, debugging them can be a pain and you just loose hours of productivity in the end. It's where the idea of SquareKicker came from, because I was sure I wasn't the only one who wished there was and easier way to build custom websites that would free me from technical issues and allow me to stay focused on the design and creativity.