Jump to content

Forced Mobile Menu on Desktop Animation

Recommended Posts

pw : B1gSpl4sh 

Hi there,

I've created a custom menu which enables a forced mobile menu on desktop, and also an animation effect that I'm quite happy with. Currently the animation only plays when I open the menu; would love some assistance in creating an animation to act in the reverse when the menu is closed.

Here is the code in place for the forces mobile menu on desktop, as well as the current opening menu animation.

Thanks in advance!

//Forced Mobile Menu on Desktop//
.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
@media only screen and (min-width: 640px){.header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%;}}

//mobile menu on desktop animation//
@keyframes slide-down { from {bottom:90%; opacity:0;} to {bottom: 0%; opacity:1}}@media only screen and (min-width: 640px){ .header--menu-open .header-menu  {animation-name: slide-down; animation-duration:0.3s}}

Edited by blankslatecreative
Link to comment
  • Replies 2
  • Views 212
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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.