Jump to content

Troubles with social icons

Recommended Posts

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!

Link to comment
  • Replies 6
  • Views 431
  • Created
  • Last Reply

Top Posters In This Topic

#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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Bildschirmfoto 2023-01-10 um 21.35.18.png

Bildschirmfoto 2023-01-10 um 21.35.37.png

Link to comment
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.

Bildschirmfoto 2023-01-10 um 21.35.18.png

Bildschirmfoto 2023-01-10 um 21.35.37.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Link to comment
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

image.thumb.png.696a7f29cff96000adfd4bf07ade8d49.png

  • Use code to make underline when users is on page

So you can easily change the banner.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

image.thumb.png.696a7f29cff96000adfd4bf07ade8d49.png

  • 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

Edited by binh
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.