Remove animation from header scroll - Impulse Theme

Retired Boards Appdev Store Design
1

I want to remove the animation that pushes the header out of view before appearing again after scrolling a bit. I want it stay fixed and not be pushed out of view. I have attached a video of what I am talking about.

I am using impulse theme and have the navigation set to sticky. Through the inspector I see the line that changes and found where to control the fade in portion of the animation, but I want to remove the animation entirely.

2

Hi @calebstephen ,

Could you share preview URL so I can check and give you a solution?

3

https://zzzqrmtk270rgxn1-27198572.shopifypreview.com

4

Please try to add this to your theme.css.liquid file

#SiteHeader { position: fixed; width: 100%; }
.site-header--stuck { transform: none !important; }
5

Hello @calebstephen ,

This issue can be fixed with the help of a custom code, you can check by adding the below-provided code at the end of your theme.css file, and see if it resolves your issue.

#SiteHeader{

position: fixed !important;

width: 100% !important;

transform: none !important;

}

Hope it resolves your issue, feel free to connect with us for any further queries.

Regards,

CedCommerce

6

Nope, didn’t work.

7

Also didn’t work.

8

Go to your theme.css file and find this:

.site-header–stuck{
position:fixed;
left:0;
right:0;
top:0;
transform:translate3d(0, -100%, 0);
transition:none;
z-index:20
}

and remove

transform:translate3d(0, -100%, 0);
transition:none;

Should solve it.

9

I tried that on a test copy of my shop. That made the animation go away, the header still gets pushed out of view on the initial scroll instead of being truly stuck.

https://gcj7e6dekzd1uel6-27198572.shopifypreview.com

Here a link to the preview shop with the transform and transition code removed. I just want the header to stay stuck in place.

10

Hello there

To remove the animation from the header scroll on the Shopify Impulse theme, you can try the following steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the Impulse theme and click on the “Actions” button, then select “Edit code.”

  3. In the left-hand menu, go to the “Sections” folder and click on “header.liquid” to open the file in the code editor.

  4. Locate the following code in the file:

$(document).ready(function() {
  $('#site-header').addClass('animated');
});
  1. Replace the code with this:
$(document).ready(function() {
  $('#site-header').removeClass('animated');
});
  1. Save your changes and the animation should no longer appear on the header scroll.

Alternatively, you can try disabling the animation in the theme settings. To do this, follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the Impulse theme and click on the “Customize” button.

  3. In the left-hand menu, go to the “General settings” section and click on “Animation.”

  4. Uncheck the box next to “Enable header animation” and save your changes. This should disable the animation on the header scroll

hope this helps!