Hover Animation

[YassSaddouni]

I want to add hover animations to the links on my header like in the video below, is it an app that I can download to customize these animations or is it a code? 

Thanks in advanced for answers!

[devcoders]

Hello @YassSaddouni 

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

[YassSaddouni]

https://www.welovepets.shop

There shouldn't be a password on it if so it should be: dieffa

Thank you in advance! 

[Ahmad31]

Hi @YassSaddouni 

• From your Shopify admin, go to Online Store > Themes.
• Click Actions > Edit Code for your active theme.
• find theme.liquid file paste this code before </head> tag:

<style>
/* Header link hover animation */
.header__link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit; /* Matches the current text color */
  transition: color 0.3s ease;
}

.header__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; /* Adjust space below text */
  width: 100%;
  height: 2px; /* Adjust line thickness */
  background-color: currentColor; /* Matches the text color */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.header__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__link:hover {
  color: #ff5733; /* Optional: Change text color on hover */
}
</style>

• Ensure your header links have a class that matches the CSS selector above (e.g., .header__link).
• If needed, adjust the class name to match your theme's structure.

[YassSaddouni]

It doesn't seem to be working for me 😕 maybe I don't understand what you meant by ensuring my header links have a class that matches the CSS selector I'm a noobie 

Here is my website in case I did anything wrong: https://www.welovepets.shop  Password: dieffa

Thank you very much!

[Ahmad31]

• From your Shopify admin, go to Online Store > Themes.
• Click Actions > Edit Code for your active theme.
• find theme.liquid file paste this code before </head> tag:

<style>
/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Navigation Styles */
.header__inline-menu {
  display: flex;
  justify-content: center;
  background-color: #fff; /* Background color of the nav */
  padding: 10px 0;
  border-bottom: 1px solid #ccc; /* Optional divider */
}

.list-menu {
  list-style-type: none;
  display: flex;
  gap: 25px; /* Adjust spacing between menu items */
}

.header__menu-item {
  font-size: 16px;
  display: list-item !important;
  position: relative; /* Ensure relative positioning for animation */
}

/* Link Styles */
.header__menu-item {
  font-size: 16px;
  font-weight: 500;
  color: #000; /* Default text color */
  cursor: pointer;
  display: block;
  padding: 10px 15px;
  text-align: center;
  border-radius: 4px; /* Rounded edges */
  position: relative; /* For hover animation */
  overflow: hidden; /* Prevent the hover effect from affecting the children (like images) */
  transition: all 0.7s ease !important; /* Smooth transition for hover effects */
}

/* Hover Effect */
.header__menu-item:hover:not(.header__active-menu-item) {
  color: #fff !important; /* Text turns white on hover */
  background-color: #3b3b3b !important; /* Dark background on hover */
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adds a shadow on hover */
  animation: hideToShow 0.7s ease-out forwards; /* Custom animation for hiding and showing */
}

/* Animation: Hide and Reappear from Bottom */
@keyframes hideToShow {
  0% {
    opacity: 0; /* Start as invisible */
    transform: translateY(20px); /* Start from below */
  }
  100% {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* End at normal position */
  }
}

/* Active Tab Styling */
.header__active-menu-item {
  color: #000000; 
  background-color: transparent;
  font-weight: bold !important;
  text-decoration: underline; /* Ensure no underline */
  padding: 10px 20px; /* Add padding to make the menu item more clickable */
  border-radius: 4px; /* Adds rounded corners */
}

</style>