Remove Navigation

[kwelch]

Hey Folks, new to the forum. I believe I’m missing something small. I’m in shopify and trying to remove the left and right navigation area. Thank you for the help in advance!

The navigation arrows are visible on mobile currently, but not clear on desktop. Here is the product page that you can see the left and right arrows.
https://mek-magnet.myshopify.com/products/mek-magnets?variant=22761562112081

View Source Code Below ———-

.product-single{
background: #fff;

.product-single__image{
.large-image {
cursor: pointer;
display: block;
padding: 1px;
overflow: hidden;
position: relative;
border: 1px solid #d7d7d7;
border-radius: 3px;
}
}
.product-media{
position: relative;

.thumb{
  border: 1px solid $border-color; 
}
.slick-slide img {
  margin: 0 auto;
}
.slick-list{
  overflow: hidden;
  .item{
    &.slick-current{
      a{
        border-color:$main-color; 
      }
    }
    a{
      display: none;
      border: 1px solid $border-color; 
      overflow: hidden;
      &:hover{
        border-color:$main-color; 
      }
    }
  }
}
&.thumbnais-bottom{
  .product-photo-container{
     margin-bottom: 15px; 
  }
  .slider-nav{
    @media (min-width: 1200px){
      &:hover{
        .slick-arrow{
          opacity: 1;
          visibility: visible;
          &.slick-next{
            right: -18px;
          }
          &.slick-prev{
            left: -18px; 
          }
        }
      }
    }
    .slick-list{
      margin:0 -5px;
    }
    .slick-slide {
      padding:0 5px;
      text-align:center;
    }
    .slick-arrow{
      display: block;
      padding: 0px;
      border: 0px;
      width: auto;
      height: auto;
      line-height: 30px;
      position: absolute;
      background: none;
      z-index: 99;
      top: 50%;
      margin-top: -18px;
      outline: none;
      cursor: pointer;
      background: #999;
      color: #fff;
      width: 30px;
      height: 30px;
      font-size: 14px;
      text-align: center;
      @include transition(all 0.3s ease);
      @media (min-width: 1200px){
        opacity: 0;
        visibility: hidden;
      }
      &:hover{
        background: $main-color; 
      }
      &.slick-next{
        @media (min-width: 1200px){
          right: 10px; 
        }
        right: 0px; 
      }
      &.slick-prev{
        @media (min-width: 1200px){
          left: 10px; 
        }
        left: 0px; 
      }
    }
  }
}
&.thumbnais-left,
&.thumbnais-right{
  position: relative;
  .slick-arrow{
    text-align: center;
    font-size: 25px; 
    cursor: pointer;
  }
  .product-photo-container{
    float: $left;
    width: calc(100% - 112px);   
    @media (max-width: 568px){
      width: calc(100% - 92px);   
    }
  }
  .slick-vertical{
    width: 98px;
    height: 100%;
    position: absolute;
    top: 0;
    @media (max-width: 568px){
      width: 80px;
    }
    .item{
      padding: 5px 0;
    }
  }
}
&.thumbnais-left{
  .product-photo-container{
    float: $right;

  }
  .slick-vertical{
    #{$left}: 0;
    #{$right}: auto;
  }
}
&.thumbnais-right {
  .product-photo-container{
    float: $left;

  }
  .slick-vertical{
    #{$left}: auto;
    #{$right}: 0;
  }
}

}

[Author]

Posts