How to change header scrolling animation

Hi @datwayfred

Katrine from Plak Theme support here,

In order to assist you with your request, could you tell me first which theme are you referring to ? is it Sly theme?

Thanks in advance

Posted by: @plaktheme

Hi @datwayfred

Katrine from Plak Theme support here,

In order to assist you with your request, could you tell me first which theme are you referring to ? is it Sly theme?

Thanks in advance

Hi Katrine, I want to do the same and I am using Sly theme, could you show me how to do it please? thanks in advance

Hi @zorem-glek

Sly theme has been designed to single product stores, where a big slider or image with text will give the first impression to the viewer, this is why we disabled the main navigation menu until the viewer stars scrolling down, if you still would like to disable this effect, I invite you to follow these steps in order to have fixed main menu :

• From your Shopify dashboard click Online store > Actions > Edit code
• Open the file theme.scss.liquid
• Change this code 

.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: +1;
opacity : 0;
margin-top : 20px;
&.header-fixed{
position: fixed;
z-index: 9;
width: 100%;
top: 0;
opacity : 1;
margin-top : 0px;
-webkit-transform: translate3d(0, 0, 110%);
transform: translate3d(0, 0, 110%);
transition: all 0.7s cubic-bezier(0, 0, 0.38, 1);
border: none;
}
@include media-query($small) {
border-bottom: 1px solid $color-border;
padding: 0;
}
}

• To this one

.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: +1;
&.header-fixed{
position: fixed;
z-index: 9;
width: 100%;
border: none;
}
@include media-query($small) {
border-bottom: 1px solid $color-border;
padding: 0;
}
}

• Click save

Let me know if it worked and if you need any further assistance

Best regards,
Katrine

thank you so much for the prompt and lighting fast reply, it worked, have a nice evening Katrine 🙂