Having the mobile menu slide in on the left side of my site.

Lets give this a try. Put the following in Design > Custom CSS.

/*

  begin mobile menu left flyout
  
  Version       : 0.3d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : uses LESS syntax
                  
                  the reveal menu items code supports up to 32 menu items in a
                  menu
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @flyout-transition-duration : 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;
  
  /*
  
    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 is false
  
    @reveal-menu-items-delay-step : 0.03s;
    
    @reveal-menu-items-effect-flyout : false;
    
    // end ignored if @reveal-menu-items is 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;
          
          -webkit-transition : unset;
          -o-transition : unset;
          transition : unset;
          
          visibility : unset;
          
          }
        }
        
    .header--menu-open .header-menu .header-menu-cta,
    .header-menu,
    .header-menu-cta,
    .header-menu-nav-item a,
    .header-menu-nav-list
    
      {
      
        opacity : unset;
        
        -webkit-transform : unset;
        -ms-transform : unset;
        transform : unset;
        
        -webkit-transition : unset;
        -o-transition : unset;
        transition : unset;
        
        visibility : unset;
        will-change : unset;
        
        }
        
    /* end unset SS built-in menu effect */
    
  // begin move menu off screen
  
    .header-menu {
    
      transition-property : transform;
      transform : translateX( -100% );
      will-change : transform;
      
      .close-effect ( @flyout-transition-duration, @close-duration-shorten-by );
      
      }
      
    .header-menu-nav-folder {
    
      transform : translateX( 200% );
      
      }
      
    // end move menu off screen
    
  // begin move menu on screen
  
    .header--menu-open .header-menu {
    
      @duration : @flyout-transition-duration;
      
      -webkit-transition-duration : @duration;
      -o-transition-duration : @duration;
      transition-duration : @duration;
      
      transition-timing-function : ease-out;
      transform : translateX( 0 );
      
      }
      
    .header-menu-nav-folder--active {
    
      transform : unset;
      
      }
      
    // end move menu on screen
    
  // close menu effect, optional
  
  .close-effect ( @duration, @offset ) when ( @close-effect = true ) {
  
    @d : round( @duration - @offset, 3 );
    
    -webkit-transition-duration : @d;
    -o-transition-duration : @d;
    transition-duration : @d;
    
    transition-timing-function : ease-in;
    
    }
    
  .reveal-menu-items ( @flyout-transition-duration,
  
    @reveal-menu-items-delay-step );
    
  // reveal menu items
  
  .reveal-menu-items ( @start, @step ) when ( @reveal-menu-items = true ) {
  
    .reveal-menu-items-effect-flyout ( @flyout-transition-duration );
    
    // reveal menu items effect flyout
    
    .reveal-menu-items-effect-flyout ( @duration ) when ( @reveal-menu-items-effect-flyout = true ) {
    
      // @reveal-menu-items = true, 
      
      .header-menu-nav-item {
      
        transform : translateX( -100% );
        transition-duration : @duration;
        
        }
        
      .header--menu-open .header-menu-nav-item {
      
        transform : translateX( 0 );
        
        }
      }
      
    @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 );
    
    }
    
  // end mobile menu left flyout

Let us know how it goes.

3 hours ago, Elise__ said:

I would only like to 'soften' the effect a bit. I have tried doing this by including a 'fade' animation.

I think you can do this without the animation code.

Add the following after my code.

.header-menu-nav-item {

  opacity : 0;
  
  -webkit-transition-property : opacity;
  -o-transition-property : opacity;
  transition-property : opacity;
  
  visibility : initial;
  will-change : opacity;
  
  }

.header--menu-open .header-menu-nav-item {

  opacity : 1;
  
  -webkit-transition-duration : 3s;
  -o-transition-duration : 3s;
  transition-duration : 3s;
  
  -webkit-transition-timing-function : ease-out;
  -o-transition-timing-function : ease-out;
  transition-timing-function : ease-out;
  
  visibility : initial;
  
  }

Basically this overrides my visibility reveal code and uses an opacity change instead.

Let us know how it goes.

Can you share your site url? We can check easier.

@tuanphan my site url is inunzi.com

@tuanphan Are you meaning for you to be an admin on my site so that you can help with the code easier?

I think @tuanphan just wanted the URL for your site so that anyone who might be able to help can take a look.

Oh @creedon thanks! But do you think you can help me? This would be very helpful since no one has on this subject yet.

Omg thank you! I will test this tomorrow and I will let you know the results!

@creedon it looks very good and I really like it. But is it possible to have a mobile menu this big, and have a space on the side like the one below? Thanks!

If I understand what you want correctly, you want the font size to be much smaller on the mobile menu?

On the spacing. You want there to be space at the right so that the menu does not cover up the page below? If I have that right, doing that might be difficult. The issue is that on the right side of your site there is a border of white. So making the mobile not take up the whole screen would just reveal white for the most part. Lets work on one issue at a time. Font size first!

@creedonThank you! All of those are correct! So to start it off, How can we make the mobile menu font size smaller? Thanks!

Here is a crack at the fonts. Add the following to Design > Custom CSS.

.header-menu .user-accounts-text-link {

  font-size: 16px;
  
  }

.header-menu-nav-folder-content {

  justify-content: unset;
  
  }

.header-menu-nav-item a {

  font-size: 14px;
  font-weight: 600;
  padding: 6px;
  
  }

You can play with the numbers.

Let us know how it goes.

@creedon The fonts are just as small as needed! I’m very excited for the next step! Thanks!

2 hours ago, inunzi said:

I’m very excited for the next step!

As a starting point add the following to your CSS.

.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: 75%;
    
    }
    
  .header-menu-nav-folder:not( .header-menu-nav-folder--active ) {
  
    -webkit-transform: translatex( 65% );
    -ms-transform: translatex( 65% );
    transform: translatex( 65% );
    
    visibility: hidden;
    
    }
  }

This is for a 7.1 site.

Let us know how it goes.

@creedon thank you so so much. The only issue is that, the navigation menu is taking up a lot of the menu space. So Do you think you can make the menu go above the navigation menu like the screen shot below? Thanks!

@creedon Do you know a fix to this?

On 9/25/2020 at 10:15 PM, inunzi said:

@creedon Do you know a fix to this?

If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm!

On 3/2/2021 at 1:45 PM, Leah007 said:

If anyone found a fix for this I would be eternally grateful. My site is www.nuligoods.com. And thank you very much for the earlier code, working like a charm!

This will require a lot of code.

you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

I joined them all thank you for the recommendation!

And if anyone who is facing the same issue reads this, I ended up doing a workaround kind of cheat where I just reduced the width of the slide out menu so that it didn't get as far as my logo. Since my menu nav items are short titles anyways so they don't take up much vertical space it achieved the look I was going for without any further coding 🙂

On 9/20/2020 at 4:31 AM, creedon said:

As a starting point add the following to your CSS.

.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: 75%;
    
    }
    
  .header-menu-nav-folder:not( .header-menu-nav-folder--active ) {
  
    -webkit-transform: translatex( 65% );
    -ms-transform: translatex( 65% );
    transform: translatex( 65% );
    
    visibility: hidden;
    
    }
  }

This is for a 7.1 site.

Let us know how it goes.

Hi! 

I really like the code. I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back. 

Thanks!

10 minutes ago, EliseSob said:

I was wondering how I can adjust it so it also slides back?

Please post the URL for the page on your site where you want this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

14 minutes ago, creedon said:

Please post the URL for the page on your site where you want this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi Creedon, 

Thank you for your quick response.

https://mandarin-violin-mjw7.squarespace.com/config/

password: elise

I also noted that the 'contact' button seems to slide from the left corner, whereas the text slides from the left. Is it possible to make the button also slide from the left?

Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time? 

Thanks in advance, 

Elise 

4 hours ago, EliseSob said:

I was wondering how I can adjust it so it also slides back? It slides open when I click on the menu, but it does not slide back.

I have updated my September 16th code post.

You'll want to set @sweep-out to true.

3 hours ago, EliseSob said:

Is it also possible to make the navigation titles on the mobile menu appear from top to bottom when the menu slides at the same time?

Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in!

14 hours ago, creedon said:

I have updated my September 16th code post.

You'll want to set @sweep-out to true.

Are you thinking some kind of progressive reveal effect where New Page would be seen first, then About and so on? I don't have an immediate thought on that one. If someone has that effect in their bag of tricks feel free to chime in!

Dear Creedon, 

Thanks a lot! Exactly what I had in mind.

Is it maybe also possible to have the whole plane slide in? For example on squarespace.com when you click on the burger the menu slides in from the right like a square. Here you also see the reveal effect of the navigation titles that I had in mind.

Maybe @tuanphan has an idea in how to do make the mobile navigation titles reveal from top to bottom? 🙂 

@Elise__

I have updated my September 16th code post again. Added a menu items reveal effect. The example from SS got the old brain juices flowing.

Let us know how it goes.