sibleydesign Posted December 11, 2023 Share Posted December 11, 2023 (edited) We used custom code for a client’s website to create hover states for the navigation, but now on Chrome and Firefox the links for “Studio”, “Social”, and “Contact” are not clickable. The hover state still works for each of these navigation links, but clicking does not direct to the designated page link. In Safari, the links work as they should. Website is here: https://www.collectiveten.com/ Any support or tips on how to resolve in Chrome/Firefox? Thank you! Edited December 11, 2023 by sibleydesign Include link / typo Link to comment
Solution Ziggy Posted December 12, 2023 Solution Share Posted December 12, 2023 (edited) The pseudo ::before element you are using for the hover effect is covering the clickable element, I think that the method you are using has some inherent issues with regards to usability. Using ::after would probably work, or you can look at this method: https://forum.squarespace.com/topic/210919-creating-a-left-to-right-underline-hover-animation-in-the-nativation-bar/?do=findComment&comment=518378 Edited December 12, 2023 by Ziggy Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
sibleydesign Posted December 12, 2023 Author Share Posted December 12, 2023 Thank you, Ziggy! 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