Solved

Can the navigation bar be fixed on a PC monitor in the Supply theme?

akarl
New Member
10 0 0

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

 

 

Accepted Solution (1)
Jasoliya
Shopify Expert
4808 621 1217

This is an 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;}}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 29 (29)