Changing social link icon. CSS Code for icon only changes in mobile view and not desktop.

Hey everyone! 

I've added my Strava account to my website header, but need to code in the icon since Squarespace doesn't have a designated icon for Strava yet. 

I found a code someone wrote for exactly this, but my problem is it only changes the icon in mobile view and not desktop, even though the coding is there for both views. I double checked that the icon file is the same for both, yet it doesn't effect the desktop icon.

Here's there code:

@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/64509c14481e4e2dc47465b4/t/652185b7d4fcb0001aa3190d/1696695735215/4691462_strava_icon-3.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(2) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/64509c14481e4e2dc47465b4/t/652185b7d4fcb0001aa3190d/1696695735215/4691462_strava_icon-3.png));    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

I guess I am confused what is wrong with the desktop code vs the mobile code. I attached screen shots of the website header below in each view.

Any help is much appreciated!

Thank you! 

Hi,

What is site url? We can check easier

Shoot sorry, I thought I included it 😞

https://www.carsonsbikeservice.com

Thank you for the interest in helping me!

Use this code for desktop

header#header [href*="strava"] svg {
      display:none;
    }    
header#header [href*="strava"] {
    background-image: url(https://static1.squarespace.com/static/64509c14481e4e2dc47465b4/t/652185b7d4fcb0001aa3190d/1696695735215/4691462_strava_icon-3.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 

Thank you for the response!

Strangely that didn't change anything 😕 I will play around with it to see if that changes anything.

Here's the full CSS text, let me know if I copy/pasted it in incorrectly

 
@media only screen and (min-width:640px) { 
  header#header [href*="strava"] svg {
      display:none;
    }    
header#header [href*="strava"] {
    background-image: url(https://static1.squarespace.com/static/64509c14481e4e2dc47465b4/t/652185b7d4fcb0001aa3190d/1696695735215/4691462_strava_icon-3.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(2) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/64509c14481e4e2dc47465b4/t/6521892e5d0d443c8af5d959/1696696622560/strava-svgrepo-com.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
  }
}

It doesn't work because you wrapped my code in @media query code

 Move my code to top or bottom of CSS box, and don't wrap any symbols around code I sent

That did it! Thank you soooooo much for your help!