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)

Tejas_Nadpara
Shopify Partner
1118 222 552

@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 tejas.nadpara@gmail.com regarding any help
akarl
New Member
10 0 0

Hi Tejas,

 

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

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

 

Thanks

 

Sandip
Shopify Expert
45 2 8

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@plusinfosys.in
Skype: ramani.sandip948
akarl
New Member
10 0 0

 

 

Sandip
Shopify Expert
45 2 8

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@plusinfosys.in
Skype: ramani.sandip948
akarl
New Member
10 0 0

pwd:sewcri

 

Pls have a look when convenience.

 

Thank you

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
akarl
New Member
10 0 0

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

Now is working perfectly.

 

Thank you

mbrmedicals
Visitor
1 0 0

For the code in Theme.js, do I also add it to the bottom? I am attempting to do the same thing at mbrmedicals.com but I cannot seem to get the navigation bar to be fixed. I have copy and pasted the code you've provided. 

Jasoliya
Shopify Expert
4808 621 1217

Hi @mbrmedicals 

Add this code base on your store:

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.nav-bar {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
Geoff5
Visitor
3 0 0

Hi,

 

Is there a simple way to edit this to freeze the whole header rather than just the nav bar?

 

Thanks

Jasoliya
Shopify Expert
4808 621 1217

For that we have to do different Js code base on your theme. send me your store url i will check 

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
Pathik_Modi
Tourist
6 0 0

Hi Jasoliya

I have been looking to resolve this same issue on our website too, url: https://www.shutthefrontdoor.co.nz/

We use canopy theme and tried to use this above code for us, although for obvious reasons it doesn't work. Any chance you can help for our theme too?

Thanks in advance.

 

Kind regards

Pathik

Jasoliya
Shopify Expert
4808 621 1217

So you want to make menu bar sticky on scroll? 

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
Pathik_Modi
Tourist
6 0 0

Hi, thank you for your response.

Ideally I want the menu bar to be sticky.

 

Kind regards

Pathik

Jasoliya
Shopify Expert
4808 621 1217

Add this code in theme.js file:

$(window).scroll(function(){
    var navigationPosition = $('.logo-nav').outerHeight() + $('#toolbar').outerHeight();
    if($(window).scrollTop()>=navigationPosition){
        $('.main-nav').addClass('sticky-nav');
    }else {
        $('.main-nav').removeClass('sticky-nav');
    }
});

Now add this css in theme.scss file:

.sticky-nav.main-nav{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
Pathik_Modi
Tourist
6 0 0

It works exactly as I hoped... just one thing, when I would scroll down to any page, the background in the menu bar becomes transparent, so the links are harder to see. Please see attached picture for reference.

Any way to fix that? ideally the white background stays as a solid colour instead of becoming transparent.

Appreciate all your help!

 

Regards

Pathik


Screen Shot 2020-04-11 at 11.23.52 AM (2).pngScreen Shot 2020-04-11 at 11.23.48 AM (2).png

Jasoliya
Shopify Expert
4808 621 1217

Add this cs:

.sticky-nav.main-nav { background: white; }
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
Pathik_Modi
Tourist
6 0 0

Fantastic! it's done. You're a legend mate!

dahcar
Tourist
3 0 1

Thank you for the code.  It worked great for the navigation bar, except the text from my Collections List appears in front of the Navigation bar when scrolling.  Do you have any idea how to fix that?

 

Also, I am using the Supply theme.  Do you have any code for a fixed header as well?  Thanks!


Jasoliya
Shopify Expert
4808 621 1217

Send your store url

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
maknij
Excursionist
29 0 6

Hi there - I also have the issue with the Collection List text visible over the fixed navbar - did you ever get this resolved?

Thx

Mark

dahcar
Tourist
3 0 1

Jasoliya provided me this which worked great:

Add this css:

@media only screen and (min-width: 767px){ .sticky-nav nav#navBar { z-index: 50; }}
Jezweb
Excursionist
15 0 1

Worked for me too. Thanks

Moriah_Mattix
Tourist
6 0 2

Would you be able to use this code for the "Express" theme as well? Dealing with the same issue. The menu bar is only seen on the front page and I need it to be fixed across all devices. Thank you!

 

menu bar on home pagemenu bar on home pagenow it is gone - i need it for all pages to show up at the topnow it is gone - i need it for all pages to show up at the top

shailendra1
Shopify Partner
1 0 0

This was very helpful. Worked as expected. 

Raye
Tourist
7 0 1

Hello, does anyone else still have this problem currently? I've tried all the codes above from page 1-3, however nothing seems to be working. Does anyone have a code that would make my navbar sticky and fixed when customers are scrolling? Help would mean so much. Thanks

Digimarketing
Visitor
1 0 0

I am also having the same issue on my website, is this solution and coding still work in 2022?

i guess I tried but unfortunately didn't work at all. 
is there any expert who can help

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