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

Store Design
,
1

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

2

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.

3

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

4

Can you share password @Catanddesks

5

the password is bewlai

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • 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:

BSSTekLabs_0-1723377044753.png
BSSTekLabs_0-1723377044753.png1876×785 171 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
7

Animation.gif

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.

8

BSSTekLabs_0-1723386831770.png
BSSTekLabs_0-1723386831770.png1080×839 56.2 KB

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.

9

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

10

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

11

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

12

Glad to help you. Have a good day.