Navigation bar fixed.

Solved
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

 

 

0 Likes
Shopify Partner
566 122 186

@akarl 

 

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

 

Thank you,

Tejas

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
0 Likes
Excursionist
37 2 3

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;
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: info@biterscode.com
Skype: ramani.sandip948
0 Likes
New Member
10 0 0

Hi Tejas,

 

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

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

 

Thanks

 

0 Likes
New Member
10 0 0

 

 

0 Likes
Excursionist
37 2 3

Hey @akarl 

Can you please share front password 

So we can check and let you know

 

Thanks!

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: info@biterscode.com
Skype: ramani.sandip948
0 Likes
New Member
10 0 0

pwd:sewcri

 

Pls have a look when convenience.

 

Thank you

0 Likes

Success.

Shopify Expert
2474 415 522

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 to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
10 0 0

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

Now is working perfectly.

 

Thank you

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