Content going over sticky header

Highlighted
Excursionist
30 2 5

Hi all,

I created a sticky header, however the only problem I am having is that the arrows from the image selection go over the sticky header. The rest of the content seems to be fine. See the gif below:

https://gyazo.com/a387c6b1a641cb86eeb48596e8926489

 

The following content is those of the arrows, and the dots (which work fine):

/* Arrows */

.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  width: 0.6rem;
  line-height: 0;
  cursor: pointer;

  padding: 0;
  border: none;

  & .icon:before {
    bottom: 0;
  }
}

.slick-prev .icon:before,
.slick-next .icon:before {
  position: relative;
  transition: top 0.1s linear;
  font-size: 0.6rem;
  color: $slick-arrow-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev:hover .icon:before,
.slick-next:hover .icon:before {
  top: -0.125rem;
}

/* Dots */
.slick-dots {
  position: absolute;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;

  li {
    position: relative;
    display: inline-block;
    height: $slideshow-indicator-size;
    width: $slideshow-indicator-size;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;

    &.slick-active button:before {
      color: $slick-dot-color-active;
    }
  }

If something is wrong in the sticky header code it can be seen here:

/* Sticky header code */ 

.header-wrapper, .header-container {
  position: fixed;
  z-index: 1;
  background-color: rgba({{ settings.color_body_bg }}, 0.0);
  width: 100%;
}
.header-sticky .header-wrapper {
  background-color: rgba({{ settings.color_body_bg }}, 1);
  @include at-query($min, $medium) {
  .logo img{
    height: 60px;
   }
  }
  .site-nav {
      transition: all .3s ease, height .8s ease;
   -webkit-transition: all .3s ease, height .8s ease;
    -o-transition: all .3s ease, height .8s ease;
    margin-top:0 !important;
  }
}
.header-sticky .header-wrapper {
}
.main-content { 
  padding-top: 0px; 
}

/*Bof padding non index pages*/
body:not(.template-index) .main-content {
    padding-top: 150px;/*this is based on 260px above but that seems huge!*/
}
/*Eof padding non index pages*/

.shopify-payment-button {
  z-index: 0; 
}

Thank you in advance for helping me! 

0 Likes
Highlighted
Shopify Partner
1023 214 464

@Koenmeij 

 

Yes, I can help you to fix it. Send me your store URL so I can check assist you better.

 

Thank you,

Tehas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Excursionist
30 2 5

Hi @Tejas_Nadpara 

Thank you for replying. I was able to fix it myself with some trial-and-error. For those that might need it in the future: I changed the z-index to 2000 from the header. 

 

1 Like