Animated Gradient Mobile Menu

Install Steps

Animated Gradient Mobile Menu

Submitted by Moov Labs Works with the Brine template family

Animated Gradient Mobile Menu.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Animated Gradient Mobile Menu //

.is-mobile-overlay-active .Mobile-overlay-menu {
  width: 100%;
  z-index: 1;
  background: #000000;
  background-image: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63) !important;
  background-size: 1000% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 5s ease infinite !important;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

Step Three

Change the #53D6FF, #666BE1, #E45372, and #F07C63 values to the colors of your choice.

Set the background color value to a darker color. In case the gradient colors don’t load properly, this color will display instead.

Do not change any values to the Animation Keyframes.

Save and refresh the page. 👍

Moov Labs