Shopify themes, liquid, logos, and UX
Thanks in advance!
Can anyone help me, how to make the same hovering underline animation like on this site? https://akiufotografija.lt/
Hi @d3X
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>
<style>
.header__menu-item:hover span::after{
opacity: 1;
bottom: -4px;
display: block;
}
.header__menu-item span::after{
opacity: 0;
position: relative;
content: "";
bottom: -15px;
left: 0;
height: 2px;
width: 100%;
background-color: #2893ff;
transition: all .2s;
pointer-events: none;
}
.header__menu-item:hover span {
text-decoration: none;
}
</style>
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Makka
Thanks, the hovering animation works, but not as smooth as it should + there's only 1 part of the animation, because when i move my mouse away from it, the animation just dissapears without any fade. In https://akiufotografija.lt/ it looks more clean, when hovering on it. And somehow, my header moves, when the hovering animation starts. By the way, can you also help me with the hovering animation, that after you click on one of the pages, the effect stays on it, like that:
And that both animations wouldn't glitch on top of the other.
Hello @d3X
.header__menu-item span:hover::after{
opacity: 1;
bottom: -8px;
}
.header__menu-item span::after{
opacity: 0;
position: absolute;
content: "";
bottom: -15px;
left: 0;
height: 2px;
width: 100%;
background-color: #2893ff;
transition: all .2s;
pointer-events: none;
}
Please add this css in your css file.
Thanks.
Hi, it doesn't work as it should. The hovering animation is below the header, somehow. + I want an animation that after you click on one of the pages, the effect stays on it, like that:
Here is the view, how it looks after I've pasted the code in base.css
.header__menu-item span:hover::after{
opacity: 1;
bottom: -8px;
}
.header__menu-item span::after{
opacity: 0;
position: absolute;
content: "";
bottom: -15px;
left: 0;
height: 2px;
width: 100%;
background-color: #2893ff;
transition: all .2s;
pointer-events: none;
}
.header__menu-item:hover span{
display: block;
position: relative;
text-decoration: none;
transition: .2s;
}
span.header__active-menu-item::after{
opacity: 1;
bottom: -8px;
background-color: #ff6355;
}
.header__active-menu-item{
text-decoration: none;
text-underline-offset: unset;
display: block;
}
Repalce and add this css.
It still shows lines (blue and red ones) below the header, when hovering, somehow and the red line dissapears when i hover away from it. The red line should stay.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025