Change hover colour of social icons

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