How to make scrolling menu?

New Member
8 0 0

Hello, I have Brooklyn theme and I want the main menu to move while I am scrolling the page, so I would be able to see menu buttons, cart button, etc? 

0 Likes

Hello 

 

Did you mean to say you need a sticky header for desktop ? 

Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.
0 Likes

You can use below given code if you need sticky header 

CSS :-

.newClass .site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #ccc;
}

JS :-

$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('.header-container').addClass('newClass');
    } else {
       $('.header-container').removeClass('newClass');
    }
});
Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.
0 Likes
New Member
8 0 0

Hi, I meant that I want the header to move with the page while I am scrolling. Where should I paste this code?

0 Likes
Highlighted

Hello Antartica17,

 

paste the  below given code in theme.liquid above </body> 

 

<style>
.newClass .site-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #ccc;
}
</style>

<script>
$(window).scroll(function(){
    if ($(this).scrollTop() > 50) {
       $('.header-container').addClass('newClass');
    } else {
       $('.header-container').removeClass('newClass');
    }
});
</script>

 

Likes are appreciated, If it solved your problem please mark it as accepted solution.

Thanks & Regards
Aumento Infoway Pvt Ltd.
0 Likes