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!
