My custom icon on header does not invert color

ManolisV · May 10

Hi there!

I have a problem with a custom icon I use on my page. The page is created with a black theme and I use white icons and text. On my header, I have replaced one of the social icons with a custom email icon that links to a page on my website.
My site has only two pages that have a white background, and every element inverts color to black except the email icon.
The outcome is to be invisible on these pages, is there a way to make this work?

One minor problem is also that when you click on the email custom icon, it seems like it loads the page twice.

https://fennel-opossum-bdzy.squarespace.com/

This is the code I have on custom CSS.

// Folder Indicator Arrow - Ghost // 

a.header-nav-folder-title:after {
    content: "▾";
}

// Remove Active Link Underline //
div.header-nav-item--active a {
    background-image: none !important;
  .header-nav-folder-item-content  {
  background-image: none!important;
}
}

/* Nav item hover color */
.header-nav-item a:hover {
    color: #44E3FF !important;
}

// Blog Pagination Background Color - Ghost //

.item-pagination--prev-next {
  background-color: #fff !important;
}

// Summary read more link //
.summary-read-more-link {border:2px solid #38383B; text-align: center!important; background:#38383B; text-transform:uppercase!important}
    
.summary-read-more-link:hover {background:gray!important; color:#FFF!important}

// remove footer links //
#footer-sections .sqs-block-html a {

  text-decoration : unset;
  
  }

/* footer links hover color */
footer.sections a:hover {
	color: #fff !important;
}


/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(3) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
   
    }    
    background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-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/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}


// List title carousel //
.user-items-list-carousel .list-item-content__title {
    font-family: exo;
 font-size: 1rem !important;
  line-height:1.3;
}


// List description custom font carousel//
.user-items-list-carousel .list-item-content__description {
    font-family: exo;
  font-size: 1rem !important;
  line-height:1.3;
}

@media only screen and (max-width: 767px) {
  .user-items-list-item-container .list-item-content__title {
    font-size: 1rem !important;
  }
}

//Hover button effect//
.sqs-block-button-element--small:hover{background-color:#44E3FF!important; color:#000!important;}



//custom button COA (secondary)//
#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary { 
background-image: linear-gradient(92.88deg, #000 18.16%, #000 13.89%, #44E3FF 84.72%); 
  
color: #fff !important; flex-shrink: 0; border: 1px solid cyan;
  width:100%;}


#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary:hover { 
background-color:#44E3FF!important; 
color: #fff !important;}

Edited May 10 by ManolisV

tuanphan · May 10

Your site is private

tuanphan · May 16

Can you check the password? It is incorrect

hope!1A

ManolisV · May 16

I reset the password again, is it working now?

password: hope!1A

ManolisV · May 18

Hi @tuanphan can you check the website when able? Thanks in advance!

tuanphan · May 21

The icon is fine to me

https://fennel-opossum-bdzy.squarespace.com/

ManolisV · May 23

The problem only consists with the pages that use white background. Currently I have two pages
with this problem.

https://fennel-opossum-bdzy.squarespace.com/blog-main/made-it-to-the-other-side

And also have this problem with the store page

Thank you!

tuanphan · May 25

On 5/23/2023 at 6:50 PM, ManolisV said:

The problem only consists with the pages that use white background. Currently I have two pages
with this problem.

https://fennel-opossum-bdzy.squarespace.com/blog-main/made-it-to-the-other-side

And also have this problem with the store page

Thank you!

With blog, add this to Design > Custom CSS

[class*="type-blog"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

ManolisV · May 25

Thank you @tuanphan!! This worked for the blog, you are awesome!!
Is it possible to have the same for the Store page? I tried to change it ("type-store") but nothing happened.

One last question, when I click the email icon, I can see that it loads the targeted page two times. Is this a problem due to the site being unpublished? Or is it a different problem?

Thank you!

tuanphan · May 28

On 5/25/2023 at 7:55 PM, ManolisV said:

Thank you @tuanphan!! This worked for the blog, you are awesome!!
Is it possible to have the same for the Store page? I tried to change it ("type-store") but nothing happened.

One last question, when I click the email icon, I can see that it loads the targeted page two times. Is this a problem due to the site being unpublished? Or is it a different problem?

Thank you!

#1. With product, use this code

[class*="type-products"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

#2. It looks fine on my Windows. Which device/browser do you use?

ManolisV · May 29

Thank you for assisting me further on this!

1. I added the code in the custom CSS, but unfortunately, it does not work, is there any other possible solution?

2. This happens in both chrome and firefox, I use a desktop with windows 10

tuanphan · June 1

On 5/29/2023 at 2:30 PM, ManolisV said:

Thank you for assisting me further on this!

1. I added the code in the custom CSS, but unfortunately, it does not work, is there any other possible solution?

2. This happens in both chrome and firefox, I use a desktop with windows 10

#1. Can you send all current code after adding my code?

#2. I don't know this, it is fine on my laptop. Windows 10/Chrome

ManolisV · June 8

Hi @tuanphan here is the current code

// Folder Indicator Arrow - Ghost //

a.header-nav-folder-title:after {
content: "▾";
}

// Remove Active Link Underline //
div.header-nav-item--active a {
background-image: none !important;
.header-nav-folder-item-content {
background-image: none!important;
}
}

/* Nav item hover color */
.header-nav-item a:hover {
color: #44E3FF !important;
}

// Blog Pagination Background Color - Ghost //

.item-pagination--prev-next {
background-color: #fff !important;
}

// Summary read more link //
.summary-read-more-link {border:2px solid #38383B; text-align: center!important; background:#38383B; text-transform:uppercase!important}

.summary-read-more-link:hover {background:gray!important; color:#FFF!important}

// remove footer links //
#footer-sections .sqs-block-html a {

text-decoration : unset;

}

/* footer links hover color */
footer.sections a:hover {
color: #fff !important;
}

/*Header Social Icons*/
.header-menu-actions-action:nth-of-type(3) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);
background-size: 100%;
background-repeat: no-repeat;
}

@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(3) {
svg {
display:none;

}
background-image: url(https://static1.squarespace.com/static/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-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/6315afeebb519e1c8051bf07/t/643ff8f13b13897ccdb4278c/1681914097278/email-icon.png);
background-size: 100%;
background-repeat: no-repeat;
}

[class*="type-blog"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
filter: invert(1);
-webkit-filter: invert(1);
}

[class*="type-products"].view-item .header-actions-action--social .icon--fill:nth-of-type(3) {
filter: invert(1);
-webkit-filter: invert(1);
}

// List title carousel //
.user-items-list-carousel .list-item-content__title {
font-family: exo;
font-size: 1rem !important;
line-height:1.3;
}

// List description custom font carousel//
.user-items-list-carousel .list-item-content__description {
font-family: exo;
font-size: 1rem !important;
line-height:1.3;
}

@media only screen and (max-width: 767px) {
.user-items-list-item-container .list-item-content__title {
font-size: 1rem !important;
}
}

//Hover button effect//
.sqs-block-button-element--small:hover{background-color:#44E3FF!important; color:#000!important;}

//custom button COA (secondary)//
#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary {
background-image: linear-gradient(92.88deg, #000 18.16%, #000 13.89%, #44E3FF 84.72%);

color: #fff !important; flex-shrink: 0; border: 1px solid cyan;
width:100%;}

#block-yui_3_17_2_1_1680281724622_22433
.sqs-button-element--secondary:hover {
background-color: #44E3FF!important;
color: #fff !important;}

//search bar//
.search-input {
background-color: #FFF!important; border: none;
border-left: #44E3FF!important;
border-top: #44E3FF!important;
border-right: #44E3FF!important;
border-bottom: #44E3FF!important
}

tuanphan · June 11

Use this new code for shop/category page

[class*="type-products"].view-list .header-actions-action--social .icon--fill:nth-of-type(3) {
    filter: invert(1);
    -webkit-filter: invert(1);
}

ManolisV · June 13

Thank you so much! This works!!

My custom icon on header does not invert color

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources