Shopify themes, liquid, logos, and UX
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
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
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;
}
Thank you so much. Can this animation be aligned in a way that it move from left to right instead of being centrally aligned?
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024