Transparent Header with a hover effect does not stick as I scroll

[Catanddesks]

Hi, hope everyone is doing well, I am having an issue with my header not sticking as I scroll.
I have the option checked in Customize and tried

.shopify-section-header-sticky {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
}

but nothing seems to work

[BSS-TekLabs]

Hello @Catanddesks 
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[Catanddesks]

Hi thanks for the quick reply, here  is my site: catanddesk.co

[BSS-TekLabs]

Can you share password @Catanddesks 

[Catanddesks]

the password is bewlai

[BSS-TekLabs]

- Here is the solution for you @Catanddesks 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.header-wrapper:not(.not-homepage).gradient.hover {
    position: fixed !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Catanddesks]

Hi BSS, thanks for the quick reply again, I just got home and tried the solution and its causing some problems when I hover over it as seen in the gif above, do you happen to know how this new issue can be addressed?

- The closest thing I got was setting it as relative but even then, it pushes everything down by the same vertical width of the header.

Also, I was wondering if you'd also happen to know how to have it apply in the non-homepages too.

[BSS-TekLabs]

This problem is caused by your theme's css. You can go to the base.css file, find this line of code and delete it.

[Catanddesks]

That was the line that I added from previous reply but experimented with relative as 'fixed' was producing the problem seen in the gif 

[Catanddesks]

Hi just wondering if you have had a chance to look at this? Ive been tweaking the code but nothing seems to work :'(

[Catanddesks · Accepted solution]

I fixed it is all good, I created a dummy page and copy and pasted my code to observe the behavior of my header. Turns out it was the header.liquid that had an issue. I searched for sticky and copy the good copy's portion of the sticky header code in. And it worked, thanks @BSS-TekLabs  and @Dabsi  and sorry I dont like giving my socials and its my first time posting so Im not too sure how things work but hope you both have a good day

[BSS-TekLabs]

Glad to help you. Have a good day.