Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;}}
Share your store url so, I can take a look and assist you better.
Thank you,
Tejas
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>
I put the code mentioned on your message on the theme.js.liquid and on theme.scss.liquid but unfortunately did not work.
Hey @akarl
Can you please share front password
So we can check and let you know
Thanks!
pwd:sewcri
Pls have a look when convenience.
Thank you
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;}}
Thank you very much for your time to solve the problem.
Now is working perfectly.
Thank you
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.
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;}}
Hi,
Is there a simple way to edit this to freeze the whole header rather than just the nav bar?
Thanks
For that we have to do different Js code base on your theme. send me your store url i will check
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
So you want to make menu bar sticky on scroll?
Hi, thank you for your response.
Ideally I want the menu bar to be sticky.
Kind regards
Pathik
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;}
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
Add this cs:
.sticky-nav.main-nav { background: white; }
Fantastic! it's done. You're a legend mate!
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!
Send your store url
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
Jasoliya provided me this which worked great:
Add this css:
Worked for me too. Thanks
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!
This was very helpful. Worked as expected.
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
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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024