Jump to content

Change hover colour of social icons

Go to solution Solved by Beyondspace,

Recommended Posts

Hey,

My site is here www.louisemcilroy.com password: hello

I'm trying to invert the colours when I hover over the social icons in the site header so the button colour turns to red (#FF0000) and the outline of the icon to pink (#FFEEEF)

On top of that, I would like to duplicate those social links in my contacts page. At the moment the social links on my contact page are a different size and do not have the hover function.

I tried to inject code from previous posts but they didn't seem to work. Any help would be appreciated!

Thanks, Louise

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
4 hours ago, louisemcilroy said:

Hey,

My site is here www.louisemcilroy.com password: hello

I'm trying to invert the colours when I hover over the social icons in the site header so the button colour turns to red (#FF0000) and the outline of the icon to pink (#FFEEEF)

On top of that, I would like to duplicate those social links in my contacts page. At the moment the social links on my contact page are a different size and do not have the hover function.

I tried to inject code from previous posts but they didn't seem to work. Any help would be appreciated!

Thanks, Louise

You can try adding to Home > Design > Custom Css

.header-actions-action.header-actions-action--social a:hover {
  background-color: red !important;
}

:not(.header--menu-open) .header-actions .header-icon:not(.header-icon-border-shape-none).header-icon-border-style-solid, :not(.header--menu-open) .header-actions .header-icon:not(.header-icon-border-shape-none).header-icon-border-style-outline:hover {
  box-shadow: 0px 0px 0px 1px #FFEEEF !important;

}

Support me by pressing 👍  or marking as solution if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.png.657b424b89f4cb655f78a8626547a446.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
13 minutes ago, louisemcilroy said:

Thank you! It works. And for the second question, is there a way to duplicate the social icons to the bottom of the contact page?

Thanks again,

Louise

Have you tried using the social Links block?

image.png.942ae1bf0a2e32d8323a6e6c3ab7226f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.