threadsonline Posted May 23 Share Posted May 23 Hi guys, I am using some custom css to change the word 'login' to an icon. This has worked, apart from when i hover over the icon, the word 'login' appears. This may be because i am using another code to highlight my header navigations in red upon hover. How do i get the codes to not conflict, as I do not want the word 'login' to appear on hover. Please see codes I am currently using below: //Change 'login' from text to icon a.user-accounts-text-link { background-image: url(https://images.squarespace-cdn.com/content/v1/63a1cbd8a8a1d321d19b9b71/3b69346d-5e04-46eb-86a4-5b3595151c4f/login.png?format=500w) !important; background-size: contain; background-position: center; background-repeat: no-repeat; color: Transparent !important; height: 23px } //Bold & red header categories on hover .header-nav-item>a:hover { font-weight: bold !important; color: red !important; } .header-nav-folder-item:hover a { font-weight: bold !important; color: red !important; } I will attach some screenshots of whats happening below. site: https://threadsonline.co.uk/ password: welcome Thanks! Link to comment
Solution colin.irwin Posted May 23 Solution Share Posted May 23 Add the following to your custom css after the other code: .user-accounts-text-link:hover span { color: rgba(0,0,0,0) !important; } It sets the opacity of the hover text to zero. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
threadsonline Posted May 23 Author Share Posted May 23 9 hours ago, colin.irwin said: Add the following to your custom css after the other code: .user-accounts-text-link:hover span { color: rgba(0,0,0,0) !important; } It sets the opacity of the hover text to zero. Perfect, thank you!! 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