Hello!
You would need to edit your theme's JavaScript in order to achieve that.
One thing to note about Narrative theme is that it use a minified version of its JavaScript asset - that means it has been mangled in such a way to reduce its size and aid compression i.e. save on network bandwidth. In order to make this change, you would need to apply changes to the non-minified version of the code, make sure the theme uses that instead of the minified version and either
I will show you how to make the theme use the non-minified version of theme.js and how to do the sticky nav change. I will not go in to details of how to minify JS assets.
Step 1
We will be making changes to files that cannot be reverted so better make a backup. Go to Online Store > Themes then Actions > Duplicate.
Step 2
Go to Actions > Edit code, open Layout / theme.liquid and find following
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script><!--<![endif]--> <!--[if lte IE 9]><script src="{{ 'theme.min.js' | asset_url }}"></script><![endif]-->
Change that to be
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]--> <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
Notice that 'theme.min.js' changed to 'theme.js' in both occurrences. Hit Save. Great, now your theme is using the non-minified JS of that particular JS asset.
Step 3
Open Assets / theme.js.liquid and find following function
_toggleHeaderPosition: function() { // Check if toggle is disabled by other settings if (!scrollHandler || this.headerAnimating) return; var scrollTop = $(document).scrollTop(); this.headerHeight = this.headerHeight || this.$container.outerHeight(); // Check which header transformation needs to happen. Also check if a toggle // even needs to happen, i.e. if you're scrolling up and the header is // already displayed, why call slideOut again? // Debounce any style changes to the next frame using requestAnimationFrame if (scrollTop <= 0) { requestAnimationFrame(this._promiseHeaderReset.bind(this)); } else if ( scrollTop < this.scrollTop && scrollTop > 0 && !this.isFixed && !this.isAnimating ) { requestAnimationFrame(this._promiseHeaderSlideIn.bind(this)); } else if ( scrollTop > this.scrollTop && scrollTop > this.headerHeight && this.isFixed && !this.isAnimating ) { requestAnimationFrame(this._promiseHeaderSlideOut.bind(this)); } this.scrollTop = scrollTop; // The scroll event is fired randomly and is not guaranteed to fire when // scrollTop === 0. Double check after a short period to see if we need to // reset the header. this._doubleCheckPosition(); },
Replace for
_toggleHeaderPosition: function() { // Check if toggle is disabled by other settings if (!scrollHandler || this.headerAnimating) return; var scrollTop = $(document).scrollTop(); var offset = 200; if (scrollTop > offset && !this.isFixed && !this.isAnimating) { requestAnimationFrame(this._promiseHeaderSlideIn.bind(this)); } else if (scrollTop < offset && this.isFixed && !this.isAnimating) { requestAnimationFrame(this._promiseHeaderSlideOut.bind(this)); } this.scrollTop = scrollTop; // The scroll event is fired randomly and is not guaranteed to fire when // scrollTop === 0. Double check after a short period to see if we need to // reset the header. this._doubleCheckPosition(); },
Hit Save and check. You can play with the offset variable if you prefer the "stickyness" to kick in sooner or later.
Hope this helps!
Hey Karl!
Thanks a lot for this. Struggling on the first step, seems like the first bit to search is not there verbatim.
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script><!--<![endif]--> <!--[if lte IE 9]><script src="{{ 'theme.min.js' | asset_url }}"></script><![endif]-->
Am I doing something wrong when searching for it, any help is massively appreciated.
No problem. Here it is : https://www.mydogme.com/
Thanks a lot!
I cannot replicate that behaviour - the red floating label on the icon is always visible. Maybe you could provide me with more details such as device used, browser on device and if I have a similar one available, I can check.
However, I did notice a few other snags you may already be aware of
Subject | Author | Posted |
---|---|---|
an hour ago | ||
an hour ago | ||
an hour ago | ||
2 hours ago | ||
2 hours ago |