Jump to content

Mobile Navigation Menu

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 comment
  • Replies 5
  • Views 726
  • Created
  • Last Reply

@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 comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.