Navigation bar fixed.

[akarl]

Hello,  

I am working on the Supply theme and want to have the navigation bar fixed during scrolling down from the PC monitor (from the mobile is working fine). 

PS. The previous post did not solve this issue.

Pls assist.

Thank you

[Tejas_Nadpara]

@akarl 

Share your store url so, I can take a look and assist you better.

Thank you,

Tejas

[Sandip]

Hey @akarl 

Please add this script in your js file.

<script>

$(window).scroll(function(){
var navigationPosition = $('#navBar').offset().top;
if($(this).scrollTop()>=navigationPosition){
$('body').addClass('sticky-nav');
}else {
$('body').removeClass('sticky-nav');
}
});

</script>

and apply CSS based on this class.

<style>

.sticky-nav nav#navBar {

position: fixed;

top: 0;

bottom: auto;

z-index: 99;

}

</style>

Let me know if any other issue or this not works.

I will help you 

[akarl]

Hi Tejas,

Pls find below my web site and kindly have a look.

https://jewelry-oustamp.myshopify.com/

Thanks

[akarl]

Hello Sandip,

I put the code mentioned on your message on the theme.js.liquid and on theme.scss.liquid but unfortunately did not work.

[Sandip]

Hey @akarl 

Can you please share front password 

So we can check and let you know

Thanks!

[akarl]

pwd:sewcri

Pls have a look when convenience.

Thank you

[Jasoliya · Accepted solution]

Hi @akarl 

You can follow this code:

As you have added code of sandip but that's code has issue and i have solved, so add this:

Add this code in Theme.js

$(window).scroll(function(){
    var navigationPosition = $('.site-header').outerHeight();
    if($(window).scrollTop()>=navigationPosition){
        $('body').addClass('sticky-nav');
    }else {
        $('body').removeClass('sticky-nav');
    }
});

Add in Theme.scss file at bottom

@media only screen and (min-width: 767px) {.sticky-nav nav#navBar {position: fixed;top: 0;bottom: auto;z-index: 5;}}

[akarl]

Thank you very much for your time to solve the problem.

Now is working perfectly.

Thank you

[elizsia]

.site-nav{ position: fixed !important; top: 140px !important; right: 200px !important; z-index: 1 !important; } #PageContainer{ margin-top: 75px !important; }