Caution This is an advanced tutorial and is not supported by Shopify . It is specific to an unedited version of the Debut theme, released 7th of March. We cannot guarantee results for themes that have been modified with custom coding and/or apps. We suggest hiring a Shopify Expert if you are not com…

Here’s the fix to the Header covering the contents of the Body of the page. You need to increase the space between the Header and the Body of the page. I found that this can be adjusted by changing the values in the code above (see my example below in bold) which had acceptable results for my site.…

thanks for posting @MinusH2O . I changed the values you gave to the following to fix the header on my page. #PageContainer { padding-top: 201px; } @media screen and (max-width: 749px) { #PageContainer { padding-top: 301px; } }

I am having the same problem with the announcement bar pinned to the top (good thing) but the navigation bar is not moving up to fill the space. Did you find a solution?

I am having the same problem with the announcement bar scrolling out of view (good thing) but the navigation bar is not moving up to fill the space. Did you find a solution?

The sticky header is working well for me in the desktop view, but no on mobile… Does anyone have any tips on how to fix this? I am using the debut theme.

This worked for me!!! :slightly_smiling_face: Extending a big thanks, I’ve been troubleshooting this issue for days! :slightly_smiling_face:

Hey everyone, I have coded a professional, highly tested solution for this as well if you’d like to try. You can download/install it for free under 1 minute, just click here to read the tutorial. Besides that you also have options to turn it on/off at the customize page, even to allow it only on …

Hi. After installing several applications, such a message appeared on my website. Does anyone know how to remove it? It’s under the URL bar and the Menu bar in the center is gone. Thank you [IMG_20210108_193615.jpg]

Hi there! I followed option 1 to add the sticky header, but I need to temporarily stop using the sticky header. When I comment out all the code I added for the sticky header in the theme.js and theme.scss.liquid and save, the header is still sticky on the published website. Would you kindly let me …

Sticky/Fixed Header and Navigation for Debut Theme

Store Design

Diananajera93 December 3, 2020, 5:26pm 99

Hi! I have a question about your sticky navigation how did you make it where it is white completely? Mine follows the user but it looks like this:

Topic		Replies	Views
Sticky header (transparent on home page, white background with black on other) Technical Q&A	23	268	March 27, 2023
Debut Theme -Page moving behind Sticky header when scrolling down Store Design	6	65	November 16, 2022
Hopefully someone can help? Main menu/ Navigation issues Technical Q&A	9	167	August 9, 2022
Debut Theme sticky header without announcement bar Store Design	0	26	October 4, 2021
How to change header-menu layout Envy Theme Store Design	18	166	July 21, 2022

Sticky/Fixed Header and Navigation for Debut Theme

Related topics