Jump to content

How to remove 'login' text

Go to solution Solved by colin.irwin,

Recommended Posts

Posted

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!

Screenshot 2024-05-23 at 12.43.57.png

Screenshot 2024-05-23 at 12.44.01.png

  • Replies 2
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution
Posted

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. 
You might want to check out my
Squarespace Template Finder or read my Squarespace tips
Speaking of tips, 💲I've got a tip jar. Feel free 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  

 

Posted
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!!

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.