Menu dropdown animation - Dawn 7.0.1 Theme

Store Design
, , , , ,

Topic summary

A user seeks to add smooth dropdown animation to their Shopify Dawn 7.0.1 theme menu, similar to a reference website’s rolling effect.

Solution Provided:
EBOOST offers CSS code to be added to theme.css and modifications to header.liquid and theme.liquid files. The implementation involves:

  • Adding custom CSS for menu transitions and opacity
  • Inserting markup code before the </head> tag
  • Adding an “open” attribute to specific elements

Initial Success:
The original poster confirms the solution works well after placing the code at the bottom of the file.

Compatibility & Limitations:

  • For Dawn 12.0.0, the solution requires checking header-mega-menu.liquid and header-dropdown-menu.liquid instead of header.liquid
  • The code only applies to Mega menu and Dropdown menu types

Ongoing Issue:
Multiple users report the animation only works once per page load—it functions on initial mouse hover but fails on subsequent hovers unless the page is refreshed. This problem remains unresolved in the thread.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello folks

I want to add animation on my menu dropdown, something like this.

https://www.heavenscent.no/ (Check their animation, smooth and rolling down. :slightly_smiling_face:

My page:

www.dekanten.no

Any code we can put into this to make this happen?

2

Hi @Dekanten ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.css
  3. add code below to end of file
.menu__item.parent .navlink--child {
  opacity: 1!important;
  transition: none!important;
}

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532Ă—438 15.6 KB

3

@EBOOST Hello, i tried the code without luck im afraid, anywhere else i can check out for sure?

Maybe another code, thanks in advance. :slightly_smiling_face:

4

Hi,

  1. You can duplicate current theme.

EBOOST_0-1690897058535.png
EBOOST_0-1690897058535.png1296Ă—472 37.8 KB

  1. After that add code to this theme.

  2. Click preview theme

EBOOST_1-1690897146326.png
EBOOST_1-1690897146326.png1183Ă—731 77.8 KB

5

@EBOOST I have just tried to do that, but its not working here either iam afraid. Any ideas?

6

Hi,

Maybe suggest below steps:

  1. Go to Store Online-> theme → edit code

  2. Go to sections/header.liquid

  3. find code likes the screenshot below

EBOOST_0-1690914935028.png
EBOOST_0-1690914935028.png1757Ă—791 59.1 KB

  1. add “open” attribute

  2. Go to Layout/theme.liquid

  3. Add code below to before tag

EBOOST_1-1690915042494.png
EBOOST_1-1690915042494.png928Ă—616 29.6 KB

1 Like
7

@EBOOST Hi again, i tried like u say and added the menu code in the bottom of the file and it works very well. How do you fint all these codes? This is magic into my eyes, thank u so much for helping me with this. Amazing work. :slightly_smiling_face:

8

Hi how can I do this on dawn 12.0.0 theme?

wait for you answer :slightly_smiling_face:

9

Hi,

You can follow step by step above except step 3.

You can check the files below instead section/header.liquid.

  • snippets/header-mega-menu.liquid

  • snippets/header-dropdown-menu.liquid

EBOOST_0-1702622711885.png
EBOOST_0-1702622711885.png1085Ă—630 37 KB

1 Like
10

Hi, thank you for replying. I tried this and unfortunately it’s didn’t worked , you know maybe why?

here is my website link: Bstcloth.com

Thank you

11

Hi,

Sorry. This code only apply for Mega menu and Dropdown menu.

EBOOST_0-1702817854891.png
EBOOST_0-1702817854891.png320Ă—602 9.3 KB

12

Hey, eboost can i ask you something about that subject? When i add ur codes, it works perfectly but. It only happens once, when I open my page and move my mouse over the menu, it works, but the second time it doesn’t work, I either have to refresh the page for it to work.

What should I do to make it work every time I bring the mouse?

13

hey, im having the same problem, have u fixed it somehow? thanks