Jump to content

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

Recommended Posts

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:

 

 

Edited by sqsp
Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Edited by sqsp
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.