How can I add animation to my header menu dropdown?

Store Design
, ,
1

Dear Users,

I would need some help adding animation to my menu dropdown.

my website: https://tinywondersshop.com/ pw: koen

Example:

https://www.heavenscent.no/

Theme: Dawn 12.0

Thanks in advance,

Koen

2

Hi @TaniaN , for the header drop-down, to have the drop-down animation like the sample website, please edit the css code details[open]>.header__submenu :

details[open]>.header__submenu {
    opacity: 1;
    animation: animateMenuOpen 0.2s ease-out;
    animation-fill-mode: forwards;
    z-index: 1;
}

In addition, the text part of the navigation list also needs a transition, but this part needs to modify the style of the original code.

3

Hokay, thanks alot!

So me being an amateur in coding cant get the text part done?

Thanks anyways!

the fading is working. :ok_hand:t2:

Useful if you know which knobs to turn to make something happen.

Is there no manual for this :p?

I searched all over the internet, but because the versions differ, those instructions are nullified.

4

Hey, I don´t know why, but for me it is still not working. I would be happy if you could help me with that.

Thanks anyways !

5

Hi @TaniaN ,

Try adding below code at the end of theme.liquid to achieve that feature.
6

Hey @TaniaN ,

For the text part, you can reuse the dropdown animation, add the following code at the end of the css file:

details[open] .link--text {
    animation: animateMenuOpen 0.2s ease-out;
    animation-fill-mode: forwards;
}
7

Hello, I need to access your store to clearly see the class and id you have set for the elements. Because each store will have different naming, the code above will not work for your store.

1 Like
8

My Store is not online yet, could i give you a private access of something like this ?

9

That is my Website

https://heat4you.de/

Thank you for your feedback signal !