Disable Scroll animation that hides header?

Solved
Highlighted
Tourist
9 1 0

Hello! The base of this theme is Narrative, there is some sort of script or animation that hides the header when you scroll down.  I have sifted through my theme files countless times and I cannot seem to find what is controlling this or how to disable it on all devices! I am basically looking to make a simple fixed header however this animation overrides any CSS and still appears even if only for a moment!

https://alphamotif.net/collections/all-assets

 

Any help will be appreciated!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
911 60 152

Hey, there.

 

This is Dallas from the Shopify Social Care Team.

 

As general support, I'm not trained in more complex adjustments to Shopify store code, but I did some searching and I found some options that I think would work for you. What you're looking for is called sticky navigation and can be achieved by adding Javascript code. There are three different routes that you could take in order to achieve what you're wanting to:

 

1. This is a link to a previous forum post where Shopify Partner Karl Offenberger gives some explanation on how to add the javascript for sticky navigation. He has laid it all out in easy to follow steps so you can just follow along. 

 

2. If you're comfortable with doing the customization on your own then, by all means, go for it! However, if you'd prefer someone else do this for you then you can go to the Shopify Experts who could certainly add this code in for you. They can make a variety of different adjustments to your store with a fee. 

 

3. I also spoke with my themes team and they said that they can take a closer look at your store to see if they could get this done for you for free using the design time that comes with your store. We can't promise that it will be able to be done by them, but it is certainly an option that we can look into.

 

Do one of these three options sound interesting to you?
Please let me know if you have any further questions.

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
9 1 0

Thanks for the reply!

I'll go ahead and try making these edits myself!  I've made so many edits to the initial theme shopify won't touch my template anymore XD  Not to worry this link should be all I need! I will touch base if I run into any issues

0 Likes
Highlighted
Shopify Staff
Shopify Staff
911 60 152

I completely understand! It's great to hear that you feel comfortable enough to tackle the customization on your own. 

 

If you have any questions about this or anything else please let me know so that I can see if I can help tackle your questions. 

In the meantime have a fantastic rest of your day! 

Dallas | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
9 1 0

This is an accepted solution.

Update for anyone else trying to make this happen:

You actually don't really need to do much!  Instead of changing the entire section of javascript as the tutorial describes I have found a simple solution that seems to do the trick!

In the current them.min.js code scroll waaaaay down, look for a left aligned snippet of code that says something along the lines of _toggle_header_postion or something along those lines.  For me, this snippet was like 2/3 of the way down the entire theme.min.js file, you will have to look very closely to find it but rest assured it's there if you have the narrative theme.  Simply follow this line of code untill you see something that should look like translate:y(-100%) and just change this to "0" instead of 100.  There may be a couple spots very close to this snippet that have Y translations also so these may need to be changed to 0 as well but check as you go!  So far this trick seems to remove the effect without having to change much at all!

0 Likes
Highlighted
New Member
4 0 0

Hi,

 

Maybe you can help me with this! I'm using the Narrative theme and my client doesn't like the header to appear when you scroll up. He just wants the header to stay at the top of the page so you either scroll back up or use the back to top button. 


I think by disabeling the animation I'm already there or not? I'm still trying to get your solution to work tho..  

0 Likes
Highlighted
Tourist
9 1 0

There was a crucial step I forgot to mention when disabling/editing the Narrative header script!

Your theme serves "minified JS" which in regular speak means the regular JS code is compressed and packaged in a way that makes it hard to edit HOWEVER, if you scroll down in the theme.liquid (*not theme.scss.liquid) you will see a line of code that reads out something like this :

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'theme.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>

if you look at the third "script" tag you can see that it is set to "theme.min.js" aka minified JS.  simply remove the ".min" of this line so you are left with this for that line (dont edit the other script tags at all):

<script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

Once you do this you can then go into your theme.js file, scroll way down untill you find the function that controls the header translate (see post above) and play with that to your liking.  If you completely disable the header function and then style the header into place at the top using .CSS you should get what you need!  Check w3schools for basic concepts on alignment!

You can do it!

 

 

 

0 Likes
Highlighted
New Member
4 0 0

I finally managed to do this by simply changing the position on the 'fixed' header, the one that appears when you scroll up give a static position. All good now.  

0 Likes