Custom element in header is not sticky

Store Design
,
1

I have created a custom element above the header that has a menu item on it. I am unable to find any solution into making that element always stick to top of the page and stay above the header, instead of hiding under it when scrolling. The header element is already always on top. Ive tried coding, using the sidekick, adding CSS but it didnt work. If anyone has the solution to this please help.

This is my store url: https://cnuk1k-1s.myshopify.com/

2

Please add this code to Custom CSS in your Theme settings to solve the issue

#shopify-section-sections--29102840447314__177245436341a3b089 {
position: sticky !important;
top: 0px;
}
html .header-section:has(>#header-component[sticky=always]) {
top: 39px;
}
@media (max-width: 749px) {
html .header-section:has(>#header-component[sticky=always]) {
  top: 37px !important;
}
}

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

Best regards,

Dan from Ryviu: Product Reviews App

3

Hello,

after adding this into theme CSS and saving nothing changed. The top bar still dissapears when scrolling down. Just to let you know, the section I want sticky was made with the Shopify AI. I have tried making a new one with a “sticky” option, but it never seemed to work.

Could there be something that we can add to the code itself that works?

4

Please try to update code to this and check

#shopify-section-sections--29102840447314__177245436341a3b089 {
   position: sticky !important;
   top: 0px;
}
.header-section:has(>#header-component[sticky=always]) {
   top: 39px !important;
}
@media (max-width: 749px) {
html .header-section:has(>#header-component[sticky=always]) {
  top: 37px !important;
}
}
5

Still the same, you can check on the website yourself. If it helps I have Fabric theme version 3.4.0

6

Hey @Dan-From-Ryviu your code pretty much seems correct. Make sure the z-index of the announcement is higher than the main header and both of their z-indexes is higher than the main tag, that is everything else inside the page. So make a z-index lower in the main tag.

7

Please update the code to this and check

#shopify-section-sections--29102840447314__177245436341a3b089 {
   position: sticky !important;
   top: 0px;
   z-index: 9;
}
.header-section:has(>#header-component[sticky=always]) {
   top: 39px !important;
}
@media (max-width: 749px) {
html .header-section:has(>#header-component[sticky=always]) {
  top: 37px !important;
}
}
8

Hello, thanks for the code. Sadly it still is not working. Do I need to change or add specific code to the custom element or header element? Maybe If I force the header element to stay lower down?

9

Can you tell I where you added the code?
You can also change the code to this version below, then add it to the theme.liquid file under and check

<style>
#shopify-section-sections--29102840447314__177245436341a3b089 {
   position: sticky !important;
   top: 0px;
   z-index: 9;
}
.header-section:has(>#header-component[sticky=always]) {
   top: 39px !important;
}
@media (max-width: 749px) {
html .header-section:has(>#header-component[sticky=always]) {
  top: 37px !important;
}
}
</style>
10

This latest code gives me an error. I am uploading these to the Theme Settings Custom CSS.

image
image348×527 17.1 KB

But after deleting it from there and adding the latest code to the theme.liquid it seems to work. You can check on the page yourself, the custom bar is always on top.

11

I asked you add the last code to theme.liquid file of your theme, not in custom css of theme setting

12

Yes, I did, and it works. Thank you :slight_smile:

13

You probably need to adjust the z-index on your custom element so it sits above everything else. The header likely has a higher z-index number which is why your element goes under it when you scroll. Try adding position: sticky, top: 0, and z-index: 9999 to your custom element’s CSS and see if that keeps it on top.