Mobile Navigation Menu

Site URL: https://www.uniquelydolledwigs.com/

Hello,

I recently found a code that makes my mobile nav menu slide to the left of the screen and to only expand 80% of the screen. Is there a code that will make the background screen fade when the nav is open? Also, is there a way to remove my logo at the top when I open the nav menu? I’ve attached an example of how I would like it. Any help would be appreciated!

Add to Home > Design > Custom CSS

.header--menu-open .header-title-logo img {
    visibility: hidden;
}

Thank you, it worked! @tuanphan Is there a way to make an overlay color to fade the main site content like the picture below?

@Dee12 Can you share the code to slide menu from left?

@Olclarke yes, its:

@media only screen and (pointer: coarse) and (max-width: 1024px),

screen and (max-width: 799px ) {

  /* pull the menu off the left edge of the screen */

  .header-menu {
  
    /*
    
    -1024px off the left edge of screen plus a little extra because it might not be quite
    enough on a 1024px screen
    
    */
    
    left: calc( -1024px - 5vw );
    
    }
  }

/* when the menu is open sweep in from the left */

.header--menu-open .header-menu {

  left: 0;
  /*
  
  transition time in seconds
  
  changing the number? be sure to change all three values!
  
  */
  
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  
  }
.header-menu.header-menu--folder-list {

  width: 85%;
  
  }

.header-menu-nav-folder {

  overflow-y: hidden;
  
  }

.header-menu-nav-folder:not( .header-menu-nav-folder--active ) {

  -webkit-transform: translatex( 75% );
  -ms-transform: translatex( 75% );
  transform: translatex( 75% );
  
  visibility: hidden;
  
  }

@media screen and (max-width: 767px ) {

  .header-menu.header-menu--folder-list {
  
    width: 78%;
    
    }
    
  .header-menu-nav-folder:not( .header-menu-nav-folder--active ) {
  
    -webkit-transform: translatex( 65% );
    -ms-transform: translatex( 65% );
    transform: translatex( 65% );
    
    visibility: hidden;
    
    }
  }

@Dee12 Thank you so much!!