Sidebar Menu (Mobile)

Deme
New Member
5 0 0

Hello,

I'm using Minimal theme and was wondering if it's possible to make mobile navigation on sidebar. Right now, when i click hamburger icon, menus comes/drops down. 

Example: www.gap.com 

Thanks in advance,

Deme

0 Likes

Hi Deme,

This feature require a big amount of code. It's not easy explaine at forum post, how to code it.

It's work for Shopify Expert or freelancer web developer.

Email me if you want to hire me.

Best regards, Mari

Shopify App / Theme developer
https://mpthemes.net/
0 Likes
Deme
New Member
5 0 0

Hi Mari,

Thank you for your reply.

To be honest, i was hoping to get help for free. Maybe, i'm asking too much but still. :)

Thanks anyways,

Deme

0 Likes
Ninthony
Shopify Partner
1976 296 784

I can help you out Deme. Open your "header.liquid" file. First copy all of that code and put it into a file and save it so that you have it in case anything screws up. Then put this at the top of your page:

<style>
#MobileNav {
    display: block;
    position: absolute;
    width: 100%;
    background-color: white;
    z-index: 99;
    left: -100%;
  transition:left .2s ease-in-out;
}
<style>

Then Ctrl + F and search for "icon-hamburger". You should see this:

<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" aria-controls="MobileNav" aria-expanded="false">
<span class="icon icon-hamburger" aria-hidden="true"></span>
       {{ 'layout.navigation.menu' | t }}
</button>

In the button tag delete everything but the type and the class name so it should read

<button type="button" class="mobile-nav-trigger">
  <span class="icon icon-hamburger" aria-hidden="true"></span>
    {{ 'layout.navigation.menu' | t }}
</button>

Then add this to the bottom of your file after {% endschema %}:

<script>
  var menu_length = $('#MobileNav').width();
  $('.mobile-nav-trigger').on('click',function(){
    if($('#MobileNav').css('left')==="-"+menu_length+"px"){
    $('#MobileNav').css('left','0');
    }else{
    $('#MobileNav').css('left','-'+menu_length+"px");
    }
  });
    
</script>

Should give you a sliding in navigation.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Deme
New Member
5 0 0

Hi Ninthony,

Thank you so very much! It worked perfectly!

I do have one more question though, Like, is it possible to minimize menu without clicking hamburger icon? 

Thanks a lot!

Best Regards - Deme

0 Likes
CrispinL
Tourist
4 0 1

It’s worked perfectly for me too! I have the same question as Deme, would be amazing if the menu can be closed up without clicking the hamburger icon

PS I changed the colour to non-white and the height to 5000px so the side menu would reach the bottom.

0 Likes
Robbumbieris
Excursionist
16 0 4

Hi! Im wanting to do the same but on my desktop version! Can you please help me with the code for this??

0 Likes
Manojsahoodev
New Member
2 0 0

This is really awesome thankyou for the code. I just want to disable the body while the side nav bar is active. Can you please help me to do that?

0 Likes