How to add a sticky header in Shopify Responsive Theme?

Store Design
, , , ,
1

Hello Everyone,

I am currently using the Shopify Responsive Theme on a trial basis, and I would like to improve the header section of my store.

At the moment, when I scroll down the page, the header does not remain visible or display properly in any format. I would like the header to stay visible while scrolling, similar to the style shown in the image, and I want it to work perfectly across all devices and screen sizes (Desktop, Tablet, and Mobile).

If anyone could provide the necessary code or guidance to achieve this sticky/floating header effect, I would really appreciate it.

Thank you in advance for your support!

Store: https://saqujaaxw8xz8v8l-98691711339.shopifypreview.com

Password: Admin

Desktop Mode
Desktop Mode1882×286 25.6 KB

Mobile Mode
Mobile Mode562×298 16.5 KB

3

Hi @dreamtechzone_5,

Please go to Actions > Edit code > Assets > styles.css file and paste this at the bottom of the file:

.shopify-section--header {
    position: sticky;
    top: 0;
    z-index: 99999;
    background: #FFFFFF;
}

If I helped you, then a Like would be truly appreciated.

Best,
NamPhan

4

I am currently using the Shopify Responsive Theme on a trial version. I tried adding the sticky header code in the “Custom CSS” section, but unfortunately it is not working. Since I am using the trial version, I do not have access to edit the theme code files directly. Is there any solution that works only with the Custom CSS option, without editing the theme files?

Screenshot 2026-05-19 211343
Screenshot 2026-05-19 211343412×846 24.3 KB

5

Hi @dreamtechzone_5,

Currently, you cannot add this code in Custom CSS because it includes the ‘shopify-section’ class. Therefore, adding custom code is not possible.

Have you tried checking the settings in the header?

6

Go to the settings of the Header section and paste this into “Custom CSS” setting of this section:

{
  position: sticky;
  top: 0;
  z-index: 5;
}

This code is only valid for section “Custom CSS” and would not work elsewhere.

8

It’s showing like this. It’s probably transparent. I don’t want to keep it like this.

Screenshot 2026-05-19 221458
Screenshot 2026-05-19 2214581882×639 126 KB

And I don’t want to keep these two above when you scroll.

Screenshot 2026-05-19 221819
Screenshot 2026-05-19 2218191887×127 13.3 KB

9

I see another problem. When I add this code, my megamenu is not scrolling. Thank you.

10
Can try this code, but this would not look nice since the sticky header would cover too much screen space 
div#shopify-section-sections--27495739097451__header {
  top: 0;
  position: sticky;
  z-index: 5;
  background: white;
  outline: 2px dashed red;
  
}

.megaMenu, 
#mobile_nav {
  max-height: calc(100dvh - 270px);
  overflow: auto;
}

Proper solution would require some JS code which I do not have at the moment.

Update – got a better idea in the morning – use this code in Theme Settings->Custom CSS:

:is(.shopify-section, .section,.container):has(#nav) { display: contents; }

 .column:has(#nav) {
  top: 0;
  position: sticky;
  z-index: 5;
  background: white;
  margin: 0;
  width: 100%;
}

.slicknav_nav {
  max-height: calc(100dvh - 100px);
  overflow: auto;
  margin-top: 0;
}

#mobile_nav, #nav {   margin-top: 0; }

@media (max-width:799px) {
  body:has(.slicknav_open)  {
    overflow: hidden;
  } 
}

@media (min-width:800px) {
  .megaMenu{
    max-height: calc(100dvh - 100px);
    overflow: auto;
  }
  body:has(.menu-desktop .megaMenu-dropdown[aria-expanded=true])  {
    overflow: hidden;
  } 
}
11

Hi @dreamtechzone_5,

please send me your store URL so I can check it.

Thanks!