Mobile menu overlay background

Hello! 

 

I'm having some trouble with the overlay background of my mobile menu. 

I need to apply a blurred background to it that matches the blur I've put on the header, but nothing I have tried so far has done the trick. There's a fly-out menu coded in, and some of the things I tried have applied a background that doesn't move with the fly-out. The area might have been changed to make everything stay in place... Not sure. 

 

Any help would be much appreciated 🙂

https://violin-halibut-2csa.squarespace.com/

mmmarchitects

Code being used:

/***FORCE MOBILE MENU***/
.header .header-burger{display:flex} 
.header-nav, .header-actions {display:none} 
.header--menu-open .header-menu { opacity: 1; visibility: visible;}
/***END FORCE MOBILE MENU***/

/***ADD BLUR TO HEADER***/
   #header {
        position: fixed;
        top: 0;
        left: 0;
        width: auto!important;
        height: auto!important;

        backdrop-filter: blur(10px); 
        z-index: 999;}
/***END ADD BLUR TO HEADER***/

/***HEADER BORDERS***/
/* Common Styles for both Mobile and Desktop */
.header-announcement-bar-wrapper::before,
.header-announcement-bar-wrapper::after {
  content: '';
  position: absolute;
  height: 1px;
  background-color: #221313;
}

.header-announcement-bar-wrapper::before {
  top: 0;
}

.header-announcement-bar-wrapper::after {
  bottom: 0;
}

/* Mobile Styles */
@media only screen and (max-width: 767px) {
  .header-announcement-bar-wrapper::before,
  .header-announcement-bar-wrapper::after {
    left: 6vw!important;
    right: 5.7vw!important; 
  }
}

/* Desktop Styles */
@media only screen and (min-width: 768px) {
  .header-announcement-bar-wrapper::before,
  .header-announcement-bar-wrapper::after {
    left: 3vw!important;
    margin-right: 3vw!important; 
    right: 0!important; /* Adjust if needed */
  }
}
/***END HEADER BORDERS***/

/***HEADER MENU DESKTOP VIEW***/
@media only screen and (min-width: 768px) {
#header {
  background-color: transparent!important; 
  position: fixed!important;
  top: 2vh;
  left: 0;
  width: 100%;
  z-index: 1000;
  }
}
  .header-title-logo a {
    margin-left: 1.4vw!important;
}
body.header--menu-open {
    overflow: auto!important;
}
.header-menu--folder-list {
  position: fixed!important;
    top: -96.3%!important; 
  left: 55vw;
  width: 46vw;
  z-index: 1000; 
}
.header--menu-open .header-menu--folder-list  {
  left: 39.8vw; 
    background-color: transparent!important;
}

/*Edit menu box items sizing*/
@media only screen and (min-width: 768px) {
  .header-menu-nav-item {
    position: relative;
    width: 12vw;
    box-sizing: border-box;
    padding-left: 0vw;
    padding-right: 0vw;
  }

  .header-menu-nav-item a {
    position: relative;
    display: flex;
    align-items: !important;
    justify-content: flex-end;
    margin: 0vw;
      font-size: 1.2rem!important; 
    text-decoration: none;
  }

.header-menu-nav-item:nth-child(2) a {
  justify-content: flex-end; 
  margin-right: 5%; 
  }
  
  .header-menu-nav-wrapper {
    display: flex;
    width: 100%;
    justify-content: flex-end; 
  }

  .header-menu-nav-list {
    margin-left: auto; 
  }

.header-menu-nav-folder {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: left 1s ease-in-out;
  -webkit-overflow-scrolling: touch;
  flex-direction: column;
  background: transparent!important; 
}
}
/***END HEADER MENU DESKTOP VIEW***/

/***HEADER MENU MOBILE VIEW***/
@media only screen and (max-width: 768px) {
#header {
  background-color: transparent!important;
  position: fixed!important;
  margin-top: 2.5vh!important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  }
  .header-title-logo a {
    margin-left: 3vw!important;
  }

@media only screen and (max-width: 767px) {
    body.header--menu-open {
        overflow: hidden!important; 
      
  }}}

/*.header--menu-open .header-menu--folder-list  {
  left: 39.8vw; 
    background-color: RED!important;
  }}*/

/***MOBILE MENU AS ORIGINALLY SET BY SQUARESPACE***/

/* Reset styles for Smaller Screens (max-width: 767px) */
@media only screen and (max-width: 767px) {
  .header-menu--folder-list {
    position: fixed;
    top: 0!important; 
    left: 0%!important;
    width: 100%!important;
    height: 100%!important;
  background-color: transparent!important;
    z-index: auto;
  transition: top 0.5s ease-out;
    
  }
  

/* Add top border only to the first list item */
.header-menu--folder-list .header-menu-nav-item:first-child:before {
    content: "";
    position: absolute;
    top: -48%;
    left: 6vw; 
    right: 5.7vw; 
    height: 1px; 
    background-color: #221313; 
}

.header-menu--folder-list .header-menu-nav-item:after {
    content: "";
    position: absolute;
    bottom: -45%;
    left: 6vw; 
    right: 5.7vw; 
    height: 1px; 
    background-color: #221313;
}

  /* Reset menu open state */
  .header--menu-open .header-menu--folder-list {
    top: 0!important;
    left: auto;
  
  }

  /* Reset menu item styles */
  .header-menu-nav-item {
    top: 25vh;
    position: relative;
    width: auto;
    box-sizing: content-box;
    padding-left: 0;
    padding-right: 0;
    
  }

  .header-menu-nav-item a {
    position: relative;
    display: block;
    align-items: normal;
    justify-content: normal;
    text-decoration: none;
    font-size: 2rem!important;    
    margin-top: 30px;
    margin-right: 8vw;
     border-bottom: 1px ; 
    
  }

  /* Reset menu wrapper styles */
  .header-menu-nav-wrapper {
    width: 100%!important;
    height: 0!important;
    text-align: right;
    justify-content:center!important;
   
  }
  
  

  .header-menu-nav-list {
    margin-left: 0;
  }

  .header-menu-nav-folder {
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: auto;
    min-height: auto;
    max-height: auto;
    overflow-y: visible;
    overflow-x: visible;
    transform: none;
    transition: none;
    
  }
}
.site-wrapper .header-menu .header-menu-bg {
    background-color: transparent!important;

}

@media only screen and (max-width: 767px) {
body.header--menu-open {
    overflow: hidden!important;    background-color: transparent !important;
  }}

/****MENU FLY-OUT****/
@direction : right; // use left or right
  
  @duration-open : 0.6s;
  
  /*
  
    should the menu close with the same effect or blink; it's gone?
    
    use false or true
    
    */
    
  @close-effect : true;
  
  // make close effect a little shorter than open
  
  @close-duration-shorten-by : 0.2s; // set value to suit your needs
  
  /*
  
    reveal menu item by itself shows no visible effect. you have to use either
    a built-in reveal menu item effect or write a custom CSS effect
    
    */
    
  @reveal-menu-items : false;
  
  // begin ignored if @reveal-menu-items : false
  
    @reveal-menu-items-delay-step : 0.03s;
    
    @reveal-menu-items-effect-flyout : true;
    
    // end ignored if @reveal-menu-items : false
    
  // do not change anything below, there be the borg here
  
  // begin unset SS built-in menu effect
  
    @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px )
    
      {
      
        .header-menu {
        
          opacity : unset;
          
          .transition-unset ( );
          
          visibility : unset;
          
          }
          
        }
        
    .header--menu-open .header-menu .header-menu-cta,
    .header-menu-actions,
    .header-menu-cta,
    .header-menu-nav-item a,
    .header-menu-nav-list,
    .header-menu,
    
      {
      
        opacity : unset;
        
        .transform-unset ( );
        .transition-unset ( );
        
        visibility : unset;
        will-change : unset;
        
        }
        
    /* end unset SS built-in menu effect */
    
  // begin move menu elements off screen
  
    .header-menu {
    
      -webkit-transition-property : -webkit-transform;
      transition-property : -webkit-transform;
      -o-transition-property : transform;
      transition-property : transform;
      transition-property : transform, -webkit-transform;
      
      will-change : transform;
      
      .close-effect ( @duration-open, @close-duration-shorten-by );
      .header-menu-direction-off ( );
      
      }
      
    .header-menu-nav-folder {
    
      .header-menu-nav-folder-direction-off ( );
      
      }
      
    .header-menu-actions,
    .header-menu-cta
    
      {
      
        .transition-delay ( @duration-open );
        
        }
        
    .header-menu-actions {
    
      .header-menu-actions-off ( );
      
      }
      
    .header-menu-cta {
    
      .header-menu-cta-off ( );
      
      }
      
    // end move menu elements off screen
    
  // begin move menu elements on screen
  
    .header--menu-open .header-menu {
    
      @d : @duration-open;
      @e : ease-out;
      
      .transition-duration ( @d );
      .transition-timing-function ( @e );
      .transform-unset ( );
      
      }
      
    .header-menu-nav-folder--active {
    
      .transform-unset ( );
      
      }
      
    .header--menu-open .header-menu .header-menu-actions {
    
      @d : @duration-open;
      @e : ease-out;
      
      .transform-unset ( );
      .transition-delay ( 0.5s );
      .transition-duration ( @d );
      .transition-timing-function ( @e );
      
      }
      
    .header--menu-open .header-menu .header-menu-cta {
    
      @delay : round( 0.5s + 0.03s, 3 );
      @duration : @duration-open;
      @e : ease-out;
      
      .transform-unset ( );
      .transition-delay ( @delay );
      .transition-duration ( @duration );
      .transition-timing-function ( @e );
      
      }
      
    // end move menu elements on screen
    
  // begin direction
  
    .header-menu-direction-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-direction-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-nav-folder-direction-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( 200% );
      
      }
      
    .header-menu-nav-folder-direction-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-nav-item-direction ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-nav-item-direction ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-actions-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-actions-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    .header-menu-cta-off ( ) when ( @direction = left ) {
    
      .transform-translate-x ( -100% );
      
      }
      
    .header-menu-cta-off ( ) when ( @direction = right ) {
    
      .transform-translate-x ( 100% );
      
      }
      
    // end direction
    
  // close menu effect, optional
  
  .close-effect ( @duration, @offset ) when ( @close-effect = true ) {
  
    @d : round( @duration - @offset, 3 );
    @e : ease-in;
    
    .transition-duration ( @d );
    .transition-timing-function ( @e );
    
    }
    
  .reveal-menu-items ( @duration-open, @reveal-menu-items-delay-step );
  
  // reveal menu items
  
  .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) {
  
    .reveal-menu-items-effect-flyout ( @duration-open );
    
    // reveal menu items effect flyout
    
    .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) {
    
      .header-menu-nav-item {
      
        .transition-duration ( @duration );
        .header-menu-nav-item-direction ( );
        
        }
        
      .header--menu-open .header-menu-nav-item {
      
        .transform-unset ( );
        
        }
        
      }
      
    @iterations : 32;
    
    .transition-delays ( @i ) when ( @i > 0 ) {
    
      .header-menu-nav-item:nth-child( @{i} ) {
      
        @d : round( @i * @step + ( @start / 2 ), 3 );
        
        .transition-delay ( @d );
        
        }
        
      .transition-delays ( @i - 1 );
      
      }
      
    .transition-delays ( @iterations );
    
    }
    
  // begin mixin utilities
  
    .transform-translate-x ( @value ) {
    
      -webkit-transform : translateX( @value );
      -ms-transform : translateX( @value );
      transform : translateX( @value );
      
      }
      
    .transform-unset ( ) {
    
      -webkit-transform : unset;
      -ms-transform : unset;
      transform : unset;
      
      }
      
    .transition-delay ( @delay ) {
    
      -webkit-transition-delay : @delay;
      -o-transition-delay : @delay;
      transition-delay : @delay;
      
      }
      
    .transition-duration ( @duration ) {
    
      -webkit-transition-duration : @duration;
      -o-transition-duration : @duration;
      transition-duration : @duration;
      
      }
      
    .transition-timing-function ( @easing-function ) {
    
      @e : @easing-function;
      
      -webkit-transition-timing-function : @e;
      -o-transition-timing-function : @e;
      transition-timing-function : @e;
      
      }
      
    .transition-unset ( ) {
    
      -webkit-transition : unset;
      -o-transition : unset;
      transition : unset;
      
      }
      
    // end mixin utilities
    
  // end mobile menu left fly OUT//
 

 

 

 

Edited November 22, 2023 by robfeltrin