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

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

Question

Hello. I was wondering if it is possible to have a mobile menu slide in on the left side of my site when someone clicks/taps on the hamburger menu button. I have a video down below to show a better example of what I have in mind. If anyone knows how to do this please reply to my message and let me know how to do it. Thanks!

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0

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.


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0

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

Edited by inunzi

Share this post


Link to post
  • 0

@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!C8552D9E-8555-40B5-91EF-2538BBA64F23.thumb.png.91c916d136e04b24af6ceb67fcb08ba4.png

Share this post


Link to post
  • 0

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!


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0

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.


Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0
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.

Edited by creedon
version 2 of CSS

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Share this post


Link to post
  • 0

@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!941EEB33-233C-4870-9883-4265E56828B0.thumb.png.668962688ad1ac7706836143bc682e95.png0E5E828B-8722-48B7-BA0D-2963C6A62A49.thumb.png.d1d52a0863c1a8527cc59cd216f6760e.png

Share this post


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