Sticky fixed navigation on Narrative theme

Tourist
10 0 0

Hey, 

Have tried a bunch of methods in the forum but cannot find anything which works well for the Narrative theme. 
Looking to just have the navigation fixed on top. The benefit I see is when they add to cart they see the red dot as feedback :) 

 

Thanks!

0 Likes
Shopify Partner
1843 172 548

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

 

  • serve non-minified theme.js hence forth 
  • minify the modified version yourself and upload it to the Assets folder

 

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!

I turn coffee in to code - since 1998
0 Likes
Tourist
10 0 0

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.

0 Likes
Shopify Partner
1843 172 548

Should be around the line numbers shown in the screenshot...

 

rWmq3Ja

I turn coffee in to code - since 1998
0 Likes
Highlighted
Tourist
10 0 0

Thats it! Got it working, thanks a lot!

0 Likes
Shopify Partner
1843 172 548

Welcome 🙂

I turn coffee in to code - since 1998
0 Likes
Tourist
10 0 0

Have run into a slight snag. On mobile when you add to cart. It briefly shows the little red indicator but disappears a second or so later. It makes it a bit harder for a user to know its in their cart. Any ideas ? Thanks a lot!

0 Likes
Shopify Partner
1843 172 548

Could you share the link to your store so I can take a look?

I turn coffee in to code - since 1998
0 Likes
Tourist
10 0 0

No problem. Here it is : https://www.mydogme.com/


Thanks a lot!

0 Likes
Shopify Partner
1843 172 548

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

 

  1. There is a slight "yank" when transitioning between sticky menu sliding in and out due to margins on the body
  2. On mobile, the sticky buy button at the bottom partially covers up the payment method icons
I turn coffee in to code - since 1998
0 Likes