Troubles with social icons

Hello guys,

#1 I'm looking for a way to remove a specific social icon (build in function) from the header (nav-bar). I want to keep for instance the first icon but remove the others, while I want to keep all icons in the footer.

#2 Also I'm using some custom social icons and they don't work on mobile version. 

#3 And my last issue is that I can't change custom icons on specific pages where the colors are inverted.

URL: https://quanxua.net

PW: quanxua

Thanks in advance!

#1. You want to

• Remove g.page icon from header?

I remember you can edit Header > Social Links > Remove it.

Or Add to Design > Custom CSS

header#header a.icon:last-child {
    display: none;
}

#2. Can you describe in more detail?

#3. Which page are you referring to? And change header icons or footer icons?

On 1/5/2023 at 8:57 PM, tuanphan said:

#1. You want to

• Remove g.page icon from header?

I remember you can edit Header > Social Links > Remove it.

Or Add to Design > Custom CSS

header#header a.icon:last-child {
    display: none;
}

#2. Can you describe in more detail?

#3. Which page are you referring to? And change header icons or footer icons?

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.

On 1/11/2023 at 3:38 AM, binh said:

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.

Can you add social icons first? I Don't see any icons on desktop

16 hours ago, tuanphan said:

Can you add social icons first? I Don't see any icons on desktop

Ok I just got rid of the social icons. So it's not a problem anymore. 

My problem right now is on this site: https://quanxua.net/menu (same password)

I'm using the "Menu Block" function and I want to change the banner image (in this case the Sushi) depending on which section of the menu you are. So let's say I would like to have a picture of appetizers while I'm on the "Appetizer" (Vorspeisen) section. And I would to change the image for each section.

On 1/16/2023 at 12:31 AM, binh said:

Ok I just got rid of the social icons. So it's not a problem anymore. 

My problem right now is on this site: https://quanxua.net/menu (same password)

I'm using the "Menu Block" function and I want to change the banner image (in this case the Sushi) depending on which section of the menu you are. So let's say I would like to have a picture of appetizers while I'm on the "Appetizer" (Vorspeisen) section. And I would to change the image for each section.

This is not possible. You can consider another approach

• Create 7 pages & add this same tab to top of 7 pages

• Use code to make underline when users is on page

So you can easily change the banner.

6 hours ago, tuanphan said:

This is not possible. You can consider another approach

• Create 7 pages & add this same tab to top of 7 pages

• Use code to make underline when users is on page

So you can easily change the banner.

But what if i want to keep the menu function? If I renew it as text, I would have to debug everything which takes a lot of time. The fastest way would be to code some JS which changes the picture depending on the option the user takes. Unfortunately I am not fit enough with js.. I hope you could help me out