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

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.

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

@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: 1s;
  -o-transition: 1s;
  transition: 1s;
  
  }

This CSS was designed to work on a 7.1 site.

Let us know how it goes.

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?