Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Recommended Posts

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!

C1FCFD08-BC82-4690-82DE-9AE655867177.png

Link to post
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS .header--menu-open .header-title-logo img { visibility: hidden; }  

Posted Images

@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;
    
    }
  }

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...