FROM CACHE - en_header

Navigation bar fixed.

Solved
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)

Accepted Solutions
Jasoliya
Shopify Expert
4522 586 1136

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 28 (28)
Tejas_Nadpara
Shopify Partner
1087 216 530

@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
Sandip
Shopify Expert
45 2 7

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

Hi Tejas,

 

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

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

 

Thanks

 

akarl
New Member
10 0 0

 

 

Sandip
Shopify Expert
45 2 7

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
4522 586 1136

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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

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; }
mbrmedicals
New Member
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
4522 586 1136

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Geoff5
New Member
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
4522 586 1136

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

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4522 586 1136

So you want to make menu bar sticky on scroll? 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4522 586 1136

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
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
4522 586 1136

Add this cs:

.sticky-nav.main-nav { background: white; }
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here