Hover animation in the header.

Store Design
, , , ,
1

Hey guys, I need help with a hover animation in the header.

I’d like a smooth sliding animation for the submenu. So, when I hover over the menu item “Products,” the submenu should slide out smoothly every time.

I want the same animation as here when you hover over “store”: https://tomnoske.store/

And here’s my store: https://1049xn-ya.myshopify.com/

Thanks for your help,
Tim

2

Hope this guide is helpful to you!

  1. Log in to Shopify > Online Store > Customize (https://prnt.sc/JqzLGYNkU1X0).
  2. Go to Theme Settings > Custom CSS (https://prnt.sc/pyPhZM5u885c).
  3. Copy the CSS code below, paste it into the Custom CSS box, and click Save.
header-menu details::details-content {
	display: block;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.3s;
	transition-behavior: allow-discrete;
	transition-timing-function: ease-out;
}

header-menu details[open="true"]::details-content {
	block-size: auto;
	block-size: calc-size(auto, size);
}
3

Thank you so much, I really appreciate it!