Sticky header with debutify theme implementing via code (version 6.2.1)

[Mein-Grinder]

Hello together,

i want a sticky header in my theme, i know i can buy an addon but it costs 29 euros.

And i dont want to pay 29 euros per month just to be able to use a sticky header on my webshop...

I found other ones like this: 

https://community.shopify.com/c/shopify-discussions/how-to-add-a-sticky-header-debutify-theme-versio...

but it doesnt work...

do i have to update my version? 

becuase i know its a premium addon and with premium it works...

i would rather implement it manually via code...

can someone help? 

i would be very grateful 😄 

debutify (version 6.2.1)

Greets 

Julian from my-grinder

[Moeed]

Hey @Mein-Grinder 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Mein-Grinder]

no the website is online and there is no pw on it 🙂

mein-grinder.com 🙂

[Moeed · Accepted solution]

Hey @Mein-Grinder 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header.header--center {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}
</style>
<script>
var sticky = document.querySelector('.header.header--center'); 

window.onscroll = function(){

if(window.scrollY > 150) { 

 sticky.style.background = 'black'; 

} else {

 sticky.style.background = 'rgba(00, 00, 00, 0)'; 
}
}
</script>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Mein-Grinder]

thank you very much i will try it as soon as i get home 😄 

[Mein-Grinder]

This one, right?

it doesnt show me a code to work on or to implement the one i have from you...

[Mein-Grinder]

Hello, can it be because of the payment plans? so that no one circumvent the payment plans? i dont get why i cant put in a code...

thats the answer of the support --> 

To add your code to the theme.liquid file in Debutify Theme, you should follow these steps:

• Go to your Shopify Admin and select "Online Store."
• Select your Debutify Shopify theme, click on "..." and choose "Edit code."
• Open the theme.liquid file.
• Paste your script before the closing </head> tag.

This process is for existing paid clients who have been using Debutify theme since the second quarter of the year or before and need to place a script code to keep using the add-ons.

i think this works only if i pay...

[Mein-Grinder]

ok now it worked i tried the whole time to code the copy but i had to code the theme that is online...

one question how do i need to code if i want it to be white, so that when i scroll down the colour of the words changes to black so i can see it on the bar...

[Moeed]

Hey @Mein-Grinder 

Since it's not possible via CSS only and will require custom liquid coding so I suggest you to hire a Shopify developer if you're not familiar with coding. Feel free to let me know if you want me to help you out and I would be more than happy to help you with that.

Best Regards,

Moeed

[Mein-Grinder]

how muchwould you want how much time do you need for the code?

[Mein-Grinder]

nevermind, chat gpt solved it 🙂 

thanks skynet 😄 

[oscprofessional]

Hello @Mein-Grinder 

Here are the steps to add a sticky header to your Shopify store:

- Go to your Shopify Admin.
- Navigate to Online Store > Themes > click on Actions > Edit code.
- Add the following code into your Layout > theme.liquid file.

<style>
.header .header__wrapper {
position: fixed;
width: 100%;
transition: background-color 0.3s ease;
}

.header .header__wrapper.active {
background-color: #87af7c;
}
</style>

<script>
var sticky = document.querySelector('.header__wrapper');
window.onscroll = function() {
if (window.scrollY > 150) {
sticky.classList.add('active');
} else {
sticky.classList.remove('active');
}
};
</script>

Please refer to the screenshot for reference.

This code will smoothly transition the background color of your header as users scroll down the page.
Hope this works for you!!

Thank you !!

[Mein-Grinder]

same problem here it doesnt show me a code to work on...

and i cant put in a new code...

i tried deleting theme.liquid so that i can install it new but it doesnt work either...

support cant help me theytell me they are not ableto help in coding related topics....

heeeeellllppppp😭😭😭

Greets from the lake of constance,

Julian