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…

I was editting hover menu code and somehow cant get the white space from announcement bar to not hover like before when entering this code- can someone assist? The code in this thread worked perfect before i editted how to hover to open header menu code

I want to make the header menu of my website stick to the top of the page when scrolling past it, but NOT the announcement bar above it. So that when you scroll, it first scrolls down normally until the announcement bar is not visible anymore, and then the header sticks to the top of page after scro…

Hi All/ @SeanP , Is it possible to have a sticky/fixed header for when the logo is centered please? Thanks in advance

Brilliant! Thanks for a clear and easy to follow solution!

Hi I am experiencing the same issue, except my header takes up a portion of my website and it does not return to normal. Part of my site is behind my header and I am unable to scroll up to the missing portion. Hi @glabs , I have this same problem! Were you ever able to find a solution for it?

Hi Sean Thanks for sharing this. Is there a way to just have the announcement bar visible at all times and not the header/menu bar when scrolling down the home page? Thanks!

Hi SeanP I am sure you must be frustrated with all of these tech support questions - so I completely understand if you don’t reply! I am using Debut theme with the announcement bar enabled. I have implemented Option I and it does work… but down by screen “jumps and jiggles” when it loads. Any idea…

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; } }

Sticky/Fixed Header and Navigation for Debut Theme

Store Design

Jeck October 20, 2020, 11:10pm 91

I tried to do this and it really works.

But the dropdown(when you add menu under menu haha), the search and the three-bar(for mobile view) are not working.

Topic		Replies	Views
Sticky header (transparent on home page, white background with black on other) Technical Q&A	23	267	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	165	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