Adding Animation when hovering over the menu

[technase]

Hi

I need help adding a sliding animation to the main menu items when the cursor hovers over them.
Currently, there's an underline on hover, but it's missing any smooth animation.

Could someone help me implement a smooth sliding animation to it ?

Could someone help me with this?

Link: https://testingstoresandthemes.myshopify.com/
Storefront password: lock

[rajweb]

Hey @technase ,

To add a smooth sliding animation for the underline on hover for your main menu items, you can use CSS transitions and pseudo-elements like ::before or

::after. This will allow the underline to smoothly slide in from the left or right.

Follow these steps:

1. Online Store > Themes > Actions > Edit Code > Assets > Open your CSS or SCSS file (usually theme.scss.liquid or base.css). 

2. Paste the code at the end of your CSS file.

How you can implement it:

1.  First, locate the class or element ID for your main menu items in your theme's CSS.

2. You can use the :;after pseudo-element to create the underline and apply a transition for the sliding effect.

example css code that should create a sliding underline animation when the user hovers over the main menu items:

/* Main menu item base styles */
.main-menu-item {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

/* Underline styles - initially hidden */
.main-menu-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #000; /* Customize the underline color */
  transition: width 0.4s ease;
}

/* Hover effect - sliding animation */
.main-menu-item:hover::after {
  width: 100%; /* The underline expands to full width */
}

Replace .main-menu-item with the actual class used for your main menu items in your theme if it differs.

I managed to helIfp you then, don't forget to Like it and Mark it as Solution!

Best Regard,

Rajat Sharma

[DitalTek]

hi @technase ,

You can try this code by the way add them to: Admin -> Online Store -> Themes -> Customize Code -> Assets/base.css

.header__menu-item:hover span {
    text-decoration: none;
    text-underline-offset: 0;
}

.header__menu-item span:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    transition: all 300ms ease;
    background-color: #000000;
    transform: scale(0);
}

.header__menu-item:hover span:before {
    transform: scale(1);
}

.header__menu-item span {
    transition: all 300ms ease;
    position: relative;
}

[technase]

Thank you so much. Can this animation be aligned in a way that it move from left to right instead of being centrally aligned?