Hawley Template - Want Links for Works to Change Colour

Site URL: https://www.difeidesign.com/

Hi there!

I want to get the links on my home page to change from black to white when you hover over them. I want the navigation to stay the same colour, but I want the actual links on the home page to change. I feel like this might be a CSS issue but I thought it was worth asking here!

I'm using Squarespace 7.1 and the Hawley template, if that helps. 

My site is https://www.difeidesign.com/

Thanks a bunch in advance!

I see you solved?

Unfortunately, no 😞 I just posted this here as well in the CSS forum to get more reach.

Add to Home > Design > Custom CSS

[data-active="false"] span.portfolio-hover-item-content {
    color: black;
}
[data-active="true"] span.portfolio-hover-item-content {
    color: white;
}

it almost worked, it just that the text doesn't turn from black to white.

Did you insert both code or only one?

i inserted both codes

15 hours ago, enochliu said:

i inserted both codes

I see it worked here. Did you fix?

Hi there, I realize this is an old topic now, but I was wondering if anyone was able to get this type of hover to work on the navigation bar, as opposed to the Portfolio headers. I used this provided code which was great for the portfolio, but the top Nav bar feels stagnant without some hover interactivity.

Thanks! 

9 hours ago, AdrianVieni said:

Hi there, I realize this is an old topic now, but I was wondering if anyone was able to get this type of hover to work on the navigation bar, as opposed to the Portfolio headers. I used this provided code which was great for the portfolio, but the top Nav bar feels stagnant without some hover interactivity.

 

Thanks! 

Can you share link to your site? We can check easier

7 hours ago, tuanphan said:

Can you share link to your site? We can check easier

The site is not yet live, unfortunately. I'm working in the offline trial.

The code in the previous posts helps make the project page nav work to change the hover colour, which is much appreciated.

I'm looking for code to help the header navigation icons have hover colour changes just the same. I haven't been able to find any answers on these forums yet.  

Screen Record below. You can see when i go up to the website header nav, there's no hover interactivity. 

18 hours ago, AdrianJV said:

The site is not yet live, unfortunately. I'm working in the offline trial.

The code in the previous posts helps make the project page nav work to change the hover colour, which is much appreciated.

I'm looking for code to help the header navigation icons have hover colour changes just the same. I haven't been able to find any answers on these forums yet.  

Screen Record below. You can see when i go up to the website header nav, there's no hover interactivity. 

 

852306747_ScreenRecording2022-01-10at9_47_15AM.mov

With trial plan, just setup password & share url.

13 hours ago, tuanphan said:

With trial plan, just setup password & share url.

https://echidna-bellflower-k94s.squarespace.com

password: password

Also worth noting, I tried this bit of code I found in a different thread of yours, but it does not seem to work on the Hawley template.

/* Nav item color - underline */
.header-nav-item a {
  color: #ff0000;}

18 hours ago, AdrianJV said:

https://echidna-bellflower-k94s.squarespace.com

password: password

 

Also worth noting, I tried this bit of code I found in a different thread of yours, but it does not seem to work on the Hawley template.

/* Nav item color - underline */
.header-nav-item a {
  color: #ff0000;}

@tuanphan the site is public now if that helps!

15 hours ago, AdrianJV said:

@tuanphan the site is public now if that helps!

Use this new code

div.header-nav-item a:hover {
    color: #f1f !important;
}

7 hours ago, tuanphan said:

Use this new code

div.header-nav-item a:hover {
    color: #f1f !important;
}

 

Thank you so much @tuanphan that worked perfectly.

Another problem I am having, related to the issue, is  that the portfolio hover code seems to be effecting my two portfolio pages differently, which is weird since one is a duplicate of the other page. 

If you go on the Commercial page, you can see the slashes highlight independently of the portfolio items, and are also clickable. However on the Film page, they are normal - they don't hover or interact. Any idea why that might be?

thanks again!

Hello @tuanphan

I too have two questions. 

1) I want to try and change the hover text of each item in the portfolio. So that each text is a different colour. 

2) When I hover over a portfolio item, I would like to create a block of colour. not white as it is currently set up. 

Thanks!

On 1/13/2022 at 9:08 PM, AdrianJV said:

Thank you so much @tuanphan that worked perfectly.

Another problem I am having, related to the issue, is  that the portfolio hover code seems to be effecting my two portfolio pages differently, which is weird since one is a duplicate of the other page. 

If you go on the Commercial page, you can see the slashes highlight independently of the portfolio items, and are also clickable. However on the Film page, they are normal - they don't hover or interact. Any idea why that might be?

thanks again!

Missing your email. Do you still need help?

On 2/14/2022 at 10:42 PM, studiorollo said:

Hello @tuanphan

I too have two questions. 

 

1) I want to try and change the hover text of each item in the portfolio. So that each text is a different colour. 

2) When I hover over a portfolio item, I would like to create a block of colour. not white as it is currently set up. 

Thanks!

What is your site url?

On 3/31/2020 at 3:35 PM, tuanphan said:

Add to Home > Design > Custom CSS

[data-active="false"] span.portfolio-hover-item-content {
    color: black;
}
[data-active="true"] span.portfolio-hover-item-content {
    color: white;
}

 

Hi,

I would like to ask for help. I am looking for an answer to the same problem. I tried the code you posted and the text turned white but it's static, it does not react to the cursor, I don't know why.
(After that I changed it to italics and underline)

edit: I tried to switch them around, it works now, but the default is the underlined version. So I have to hover on each link once first to make it work. That might still be a bit confusing to visitors

This is my website: 

https://www.zajdenova-jana.page/portfolio#about

18 hours ago, Janka_Z said:

Hi,

I would like to ask for help. I am looking for an answer to the same problem. I tried the code you posted and the text turned white but it's static, it does not react to the cursor, I don't know why.
(After that I changed it to italics and underline)

edit: I tried to switch them around, it works now, but the default is the underlined version. So I have to hover on each link once first to make it work. That might still be a bit confusing to visitors

This is my website: 

https://www.zajdenova-jana.page/portfolio#about

To remove underline, use this code

[data-active="true"] span.portfolio-hover-item-content {
    text-decoration: none;
}