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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.