enochliu Posted March 30, 2020 Share Posted March 30, 2020 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! Link to comment
tuanphan Posted March 31, 2020 Share Posted March 31, 2020 I see you solved? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
enochliu Posted March 31, 2020 Author Share Posted March 31, 2020 Unfortunately, no 😞 I just posted this here as well in the CSS forum to get more reach. Link to comment
tuanphan Posted March 31, 2020 Share Posted March 31, 2020 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; } Janka_Z 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
enochliu Posted March 31, 2020 Author Share Posted March 31, 2020 it almost worked, it just that the text doesn't turn from black to white. Link to comment
tuanphan Posted April 1, 2020 Share Posted April 1, 2020 Did you insert both code or only one? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
enochliu Posted April 2, 2020 Author Share Posted April 2, 2020 i inserted both codes Link to comment
tuanphan Posted April 3, 2020 Share Posted April 3, 2020 15 hours ago, enochliu said: i inserted both codes I see it worked here. Did you fix? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdrianJV Posted January 9, 2022 Share Posted January 9, 2022 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! Link to comment
tuanphan Posted January 10, 2022 Share Posted January 10, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdrianJV Posted January 10, 2022 Share Posted January 10, 2022 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. 852306747_ScreenRecording2022-01-10at9_47_15AM.mov Link to comment
tuanphan Posted January 11, 2022 Share Posted January 11, 2022 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdrianJV Posted January 11, 2022 Share Posted January 11, 2022 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;} Link to comment
AdrianJV Posted January 12, 2022 Share Posted January 12, 2022 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! Link to comment
tuanphan Posted January 13, 2022 Share Posted January 13, 2022 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AdrianJV Posted January 13, 2022 Share Posted January 13, 2022 (edited) 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! Edited January 13, 2022 by AdrianJV Link to comment
studiorollo Posted February 14, 2022 Share Posted February 14, 2022 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! Link to comment
tuanphan Posted February 17, 2022 Share Posted February 17, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Janka_Z Posted September 27, 2022 Share Posted September 27, 2022 (edited) 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 Edited September 27, 2022 by Janka_Z Link to comment
tuanphan Posted September 28, 2022 Share Posted September 28, 2022 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment