Squarespace 7.1 - Is it possible to make mobile navigation overlay slide up and down instead of fade in and out?

I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1?

I've attached a screen recording of Apple's mobile navigation in action:

17 hours ago, sqsp said:

I have one specific example that I would like to achieve for my website. Take a look at https://apple.com on mobile, and try opening and closing their menu. Notice how it slides down and up smoothly. Is there any way to achieve something similar on 7.1?

I've attached a screen recording of Apple's mobile navigation in action:

 

Screen Recording 2022-01-04 at 16.44.06.mov 2.14 MB · 1 download  

 

Try

[data-section-id="overlay-nav"] {
  height: 0px;
  visibility: unset;
  -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1);
  transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.header--menu-open  [data-section-id="overlay-nav"] {
  height: 100%;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

4 hours ago, bangank36 said:

Try

[data-section-id="overlay-nav"] {
  height: 0px;
  visibility: unset;
  -webkit-transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1), height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1);
  transition: background .36s cubic-bezier(0.32, 0.08, 0.24, 1),height .56s cubic-bezier(0.52, 0.16, 0.24, 1), opacity .36s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.header--menu-open  [data-section-id="overlay-nav"] {
  height: 100%;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Thank you, BaNgan! This is a great start. I think the animation of menu closing and menu items still needs work. I'll play with your code and see how I can improve it.

There is a great website called SquareRefresh.com (built on 7.1), and their mobile menu behaves just like Apple's. I wish Squarespace gave us more options to customize our menu designs and animations. Hopefully in the future.