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…

Fixing that jumping/scrolling down bug is simply impossible. I tried everything, changing padding, adjusting logo size and removing window.scrollTo(0, 0) from theme.js. The only way to fix it is removing this: $(window).on(“load”, headerSize); But then the header won’t be at the correct position…

Yes, fixed entirely (Replying again).

Hey, @GG9 You may want to take a look into this tutorial , at the bottom of the article you will find out how to eliminate the fixing the page jumping bug. The code we offer is different than the other ones presented in here (we use CSS’ position:sticky instead of position: fixed to provide a seaml…

Hi everyone, Could someone please help me understand the following? I used the suggested code (thank you SeanP!!) and the collection page in my Dell laptop was not showing the collection title, looking like this: [Mike5241_4-1634927617016.png] Part of the code provided is this: #PageContainer { …

Hi everyone, This liquid code is really doing crazy things. I added the following section at the end of theme.css to change the color of the collection header: /===== change color of collection and page titles ====/ .template-collection header.collection-header h1 { color: #18B2B9; } .template…

Hi @Mike5241 Kindly share your store URL so that i can a have look at the problem you are facing

Hi OSC Professional, Thanks for replying, the URL is the following: https://ecokidsland.myshopify.com/collections/moles The collection title looks ok in my iPhone, the issue is only on my laptop. As I said, everything was ok this morning, I just added the code to change the color of the collecti…

I have gone through your store. You can try this code #shopify-section-header { top: 0; } @media screen and(min-width: 991px){ .template-collection .page-container { margin-top: 10%; } }

Hi OCS Professional, Thanks a lot for your reply, you’re a genius! I think you edited your initial message? Because I tried the code you first provided me with: #shopify-section-header { top: 0; } .template-collection .page-container { margin-top: 6%; } and this one solved the issue about th…

Hello @Mike5241 You can mark it as an accepted solution

Sticky/Fixed Header and Navigation for Debut Theme

Store Design

CJTCoops November 5, 2022, 11:20am 157

Hi, I know it’s been a long time but did you get this fixed?

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