How to make the header animation on homepage different from anywhere else on the site

[Viibed]

I am designing my homepage and currently have my sticky header animation on "Only on scroll". But I want my sticky header on the homepage to be different from the rest of my site. I want the header on my homepage to be fixed at the top of the page and not have any animation, while keeping the other pages on my website WITH the "Only on scroll" animation. Here is my website: Viibed

I want my header to be stationary at the top and have NO animation.

Need help, and thank you!

[BSS-TekLabs]

Hi @Viibed,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

sticky-header.header-wrapper {
    position: fixed;
    width: 100%;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[Viibed]

Not quite what I wanted, but I want it to have no animation like how the "None" setting does it and keeps it at the top of the page. I'll show it here.

I want the HOMEPAGE header to have the "None" setting (no animation),

while every OTHER page has the "Scroll Up" animation.

Thank you for willing to help me through this, I hope this clarified what I'm trying to do.

[BSS-TekLabs · Accepted solution]

To make only the homepage not have a sticky header on scroll up, you can follow these steps:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the theme.liquid file.

3, Paste the code snippet provided below right before the closing head tag, then save your changes.

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const currentURL = window.location.href;
        const targetURL = "https://viibed.myshopify.com/";
        if (currentURL === targetURL) {
            const headerElement = document.querySelector(".section-header.shopify-section-group-header-group");
            if (headerElement) {
                headerElement.style.position = "static";
            }
        }
    });
</script>

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[BSSCommerce-HDL]

Hi @Viibed, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

{% if template.name == 'index' %}
<style>
sticky-header.header-wrapper {
    position: fixed !important;
    width: 100% !important;
    top: 0;
    left: 0;
    z-index: 1;
}
</style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[Viibed]

It worked! Thank you!