How to change dropdown menu to slide menu (drawer menu) on mobile in Simple theme?

Solved

It is a hamburger menu only on mobile.
I'll be able to move the menu icon to the right side, but the method of sliding in menu from the right to left doesn't work.

now dropdownnow dropdownスクリーンショット 2021-09-26 7.05.57.png

 

 

This is the current code

 

/*====== Navigation styles ======*/

@include media-query($medium-up) {
  .site-nav__item {
    border-bottom: 1px solid $color-border;

    &:first-child {
      border-top: 1px solid $color-border;
    }
  }

  .site-nav__grandchild {
    margin-left: 10px;
  }
}

@include media-query($small) {
  .site-nav__grandchild:first-child {
    margin-top: 5px;
  }
}

.site-nav__grandchild a {
  color: rgba($color-nav, 0.65);
}

.site-nav__link {
  display: block;
  width: 100%;
  padding: 9px 0;
  font-size: $font-size-nav;
  color: $color-nav;
 @include media-query($small) {   
    color:#2ca9e1;
 }
    
 @include media-query($medium-up) {
    padding: 12px 0;
  }

  .site-nav__submenu & {
    padding: 4px 0;   
 @include media-query($small) {   
    color: $color-nav;
 }
        @include media-query($medium-up) {
      font-size: $font-size-nav * 0.85;
    }
  }
}

.site-nav ul,
.site-footer__menu {
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

.site-nav--active a,
.site-nav__submenu .site-nav--active a {
  color: $color-nav-active;
  font-weight: $font-weight-body--bold;
}

@include media-query($small) {
  .small--text-center {
    .site-nav__link {
      margin: 0 auto;
    }
  }

  .site-nav {
    display: none;
    margin-bottom: $gutter;
    
     right: 0;
    
  }
}

.site-nav__submenu {
  margin: ($nav-link-height / 2) 0 ($nav-link-height / 3);
}

@include media-query($medium-up) {
  .site-nav__submenu--grandchild {
    margin: ($nav-link-height / 2) 0 3px;
  }
}

.site-nav__expand,
.site-nav__collapse {
  white-space: nowrap;
}


@include media-query($medium-up) {
  .site-nav__expand,
  .site-nav__collapse {
    white-space: normal;
    position: relative;
    text-align: left;

    span {
      position: absolute;
      right: 0;
      opacity: 0.8;
    }
  }

  .site-nav__collapse {
    span {
      right: 2px;
    }
  }
}

.social-links {
  margin-bottom: $gutter;

  a {
    color: $color-nav;
  }
}

.mobile-menu-icon {
  @include prefix(transform, rotate(0deg), webkit moz ms o);
  @include prefix(transition, 0.5s ease-in-out, webkit moz ms o);
  width: 6.66 * $mobile-icon-line-thickness;
  height: 5 * $mobile-icon-line-thickness;
  display: block;
  position: relative;
  margin: (2 * $gutter / 3) auto;
  color: $color-nav;
  background: none;
  border: 0;
  outline: none;

 span:nth-of-type(3)::after {
  content:"Menu";
  position: absolute;
  top:-12px; 
  left:-9px;
  color: #fff; 
text-shadow: 
    black 2px 0px,  black -2px 0px,
    black 0px -2px, black 0px 2px,
    black 2px 2px , black -2px 2px,
    black 2px -2px, black -2px -2px,
    black 1px 2px,  black -1px 2px,
    black 1px -2px, black -1px -2px,
    black 2px 1px,  black -2px 1px,
    black 2px -1px, black -2px -1px;
  font-size: 1.5rem;
  text-transform: uppercase;
}

  .line {
    @include prefix(transform, rotate(0deg), webkit moz ms o);
    @include prefix(transition, 0.25s ease-in-out, webkit moz ms o);
    display: block;
    position: absolute;
    height: $mobile-icon-line-thickness;
    width: 100%;
    background: $color-nav;
    border-radius: $mobile-icon-line-thickness;
    opacity: 1;
    left: 0;
  }


  .line:nth-child(1) {
    top: 0;
  }

  .line:nth-child(2),
  .line:nth-child(3) {
    top: $mobile-icon-line-thickness * 2;
  }

  .line:nth-child(4) {
    top: $mobile-icon-line-thickness * 4;
  }

  &.open {
    .line:nth-child(1) {
      top: $mobile-icon-line-thickness * 2;
      width: 0%;
      left: 50%;
    }

    .line:nth-child(2) {
      @include prefix(transform, rotate(45deg), webkit moz ms o);
    }

    .line:nth-child(3) {
      @include prefix(transform, rotate(-45deg), webkit moz ms o);
    }

    .line:nth-child(4) {
      top: $mobile-icon-line-thickness * 2;
      width: 0%;
      left: 50%;
    }
  }
}


.breadcrumb-nav {
  padding: 0;
  margin: (-$gutter / 3) 0 ($gutter / 3);
  font-size: $font-size-base * 0.9;
  line-height: $font-size-base * 1.6;

  @include media-query($small) {
    margin-top: $gutter / 3;
  }

  a {
    color: $color-body-text;
  }
}

.breadcrumb-nav--no-template {
  margin-bottom: 50px;
}

.breadcrumb-nav__separator {
  font-size: $font-size-base * 1.1;
  padding: 0 2px;
}

 

 

 

This is the code I tried to change into a slide menu.
It's not currently reflected, but for some reason when it was reflected there was no slide animation.
And part of the menu list disappeared, and they were near by the top not center.

 

 @include media-query($small) {   
.site-nav  {
    position:fixed;
    z-index: 999;
  top:0;
    right: -120%;
  width:80%;
    height: 100vh;
  background:#fff;
 @include prefix(transition, 0.5s ease-in-out, webkit moz ms o);
}

 .site-nav--active  {
    right: 0;
}
 }

 

 

 

 

By the way, this is the code for changing the position of the icon.
However, the method of sliding in from right is more important to me than this, so it's ok postpone fixing the strange point about icon.

 

.mobile-menu-icon { 
  @include prefix(transform, rotate(0deg), webkit moz ms o);
  @include prefix(transition, 0.5s ease-in-out, webkit moz ms o);
  width: 6.66 * $mobile-icon-line-thickness;
  height: 5 * $mobile-icon-line-thickness;
  display: block;
  position: fixed;
  right:12px;
  z-index:9999;
  margin: (2 * $gutter / 3) auto;
  color: $color-nav;
  background: #fff;
  border: 1;
  outline: #000;

 

 

 

This is my site

https://zakkyobiru.myshopify.com 

I would appreciate your help with this situation.

Thank you .

0 Likes

This is an accepted solution.

Does anyone know?

 

0 Likes

solved by myself 

Thank you

 

0 Likes
JanRae
New Member
7 0 0

Hi, I just happen to chance upon your post and im having a similar problem, what were the changes did you make to change the dropdown menu to a sliding side menu?

0 Likes

@JanRae  Hi

This is the CSS for my current mobile site so please redesign it to suit you.
Also, this is an "added part", so add it along your theme code.
I'm an amateur in coding so I can't help any more, but I hope it gives you a hint.

theme.scss.liquid/Assets

/*====== Navigation styles ======*/
 @include media-query($small) {   
#SiteNav   {
    position:fixed;
    z-index: 999;
  top:0;
  width:80%;
    height: 100vh
  background:#f5f5f5;
   @include prefix(transition, 0.5s ease-in-out, webkit moz ms o);
}

 #SiteNav .site-nav--active  {
    right: 0 ;
}

#SiteNav  .list--nav {
    position: relative;
    top:35%;
    left:40%;
    transform: translate(-40%,-35%);
  }  
 }




.mobile-menu-icon { 
  position: fixed; 
  right:12px;  
  top: 28%; 
  z-index:9999;  
  margin: (2 * $gutter / 3) auto;
  }

 

0 Likes

Sorry,The last margin is the original one so I haven't added it

0 Likes
JanRae
New Member
7 0 0

same, amateur as well haha, but thank you, will give this a go

0 Likes