header#header a:nth-child(2) {
display: none;
}
header#header a.icon:last-child {
display: none;
}
.sqs-svg-icon--list a:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/638fd5e7bfe1bf6d70bc1b66/t/6394c0c920bb4a188b1c5e03/1670693065327/WA+Icon.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/638fd5e7bfe1bf6d70bc1b66/t/6394c2c057455553dfd355bc/1670693568550/GoogleIcon.png);
background-size: 100%;
background-repeat: no-repeat;
}
.sqs-cookie-banner-v2-accept, .sqs-cookie-banner-v2-deny {box-shadow: 2px 2px 10px #ccc; }
.sqs-cookie-banner-v2 {box-shadow: inset 2px 2px 10px #ccc; background:#FFF!important;}
.sqs-cookie-banner-v2 *{color:#000!important}
.sqs-cookie-banner-v2-accept:hover, .sqs-cookie-banner-v2-deny:hover {box-shadow: 2px 2px 5px #ccc; }
.vertical-line {
height: 300px; /* line height */
width: 1px; /* line width */
background: #000000; /*line colour*/
margin-right: auto;
margin-left: auto;
}
.header-nav-item > a:after, .header-nav-folder-item > a:after {
content:'';
width: 0px;
height: 1px;
background: #fff;
display: block;
transition: width .2s ease;
}
.header-nav-item > a, .header-nav-folder-item:hover {
background: none !important;
}
.header-nav-item--active > a:after, .header-nav-item:hover > a:after, .header-nav-folder-item:hover > a:after {
width: 100%;
}
.header-nav-folder-item:hover > a {
color: #fff !important;
}
I use this code to change my social icon into custom ones in navbar and footer (and other stuff. the relevant code is in the beginning). But with your code (which is working for desktop) it does not show social icons on mobile at all. (see picture) The 2. picture shows how it used to look like
#3 Problem solved.