Hover effect on site navigation social links

Feeling social, add this code to add a hover effect to your site navigation social links when your mouse over them.

---

Add CSS to create hover effect

You can style the hover circle with CSS to change the size and color. Add custom CSS in Design > Custom CSS, for example:

//SITE NAV SOCIAL ICONS CIRCLE ON HOVER//
/* Add a transition for smooth hover effect */
.header-actions-action.header-actions-action--social a {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

/* Add a smaller filled circle on hover and change icon color */
.header-actions-action.header-actions-action--social a:hover {
  color: white !important; /* Icon color changes to white */
}

.header-actions-action.header-actions-action--social a:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px; /* Adjust circle size */
  height: 25px; /* Adjust circle size */
  background-color: #74D8E4; /* Filled circle color */
  border-radius: 50%;
  z-index: -1; /* Place behind the icon */
  transition: all 0.3s ease;
}