Sticky/Fixed Header and Navigation for Debut Theme

[CptJack93]

Hi Sean,

Thank you for the instruction. I just have a small issue where the Menu and Header bar are covering the small top part of my photo banner. Look like the photo banner is not align with the bottom of the Menu bar. It would be really helpful if you can show me how to fix it.

Thanks

[GG9]

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. Was anyone able to fix this?

[MikeST1]

Yes, fixed entirely (Replying again).

[diego_ezfy]

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 seamless experience, some additional customizable options besides sticky-ness & full compability to Online Store 2.0), so the page jumping fix may not be compatible to others solution, but it’s worth a try either way. I hope it helps you.

Kind regards,
Diego

[Mike5241]

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:

Part of the code provided is this:

#PageContainer {
padding-top: 80px;
}
@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}

I was under the impression that the first part is for desktop/laptop and the second part for mobiles but the only way I managed to fix the problem was by changing the media screen section from 70px to 90px and now the web page in my laptop computer looks like this:

So I’m confused about the code above, I’ll be greatful if someone can explain why I need to change the media section above to fix the issue in my laptop’s screen.

One more question, the product pages show a capital F at the top left corner like this:

Most probably I typed an extra F somewhere in the code, which of the liquid or css files should I look at?

Thank you very much in advance.

MP

[Mike5241]

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-page .section-header h1 {
color: #18B2B9;

And this extra code somehow created again the issue I mentioned above about the collection title not showing in my laptop so I removed the code above but for some reason the problem about the collection title not showing is still there, it doesn’t make sense, right? I mean, everything was working, I added the code above which broke something, I removed the code, saved and the problem is still there, I cleared the cache and cookies and the page behaves as if I left the code, could someone please explain what’s going on with this liquid code? What I’m describing doesn’t make any sense but trust me, it’s happening. Please make my day.

Thanks a lot!

Thank you

[oscprofessional]

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

[Mike5241]

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 collection title, the title was not showing again, I removed the code to change the color and the problem remained, this is crazy! Is there a logical explanation to this?

Regardless of this illogical thing, the following might give you a clue, if I resize the browser to a narrow window the collection title appears and the quick links section is small, but as I enlarge the browser all of a sudden the complete quick links section shows and seems to push the collection page upwards which causes the collection title to not show because it’s behing the page header, does that help to explain something?

Thank you in advance!

[oscprofessional]

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

[Mike5241]

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 the collection page title, the issue still remained in the product page because I didn’t see the top of the page and there was also the problem with the other pages such as the Contact Us page so I added this code:

.template-product .page-container {
margin-top: 6%;
}

.template-page .page-container {
margin-top: 6%;
}

and everything seems to be working now!

Thank you very much! You made my day!

[oscprofessional]

Hello @Mike5241
You can mark it as an accepted solution

[Mike5241]

Hi OSC Professional,

Sure, no problem.

Would it make sense to change back your proposed solution to the one you first posted which solved my problem?:

#shopify-section-header {

top: 0;

}

.template-collection .page-container {

margin-top: 6%;

}

I’ll be happy to mark it as accepted solution but I don’t see this as an option when clicking on the Options button nor in the button with 3 dots, how can I do it?

Regards,

MP

[Mike5241]

Hi OSCProfessional,

Please let me know how to mark it as accepted solution.

Thank you,

MP

[knk1]

I was able to fix the header. Thank you very much.

Is it possible to make the shadow appear when I scroll the page a little?
I would like the shadow and line under the header to not appear when the page is first displayed, but to appear when the page is scrolled.

[Vertere]

I’m facing a problem with the position of the header when I scroll down. It appears a space on the top before the header, propably because of my language translator app. How can I solve it? I used the first option.

https://tz8wxr76pxhcsmwl-25214786.shopifypreview.com

[LMvG]

Hi there,
I really like this solution. It was easy to implement but I seem to have the same issue as many others indicated with the header sliding under the navigation bar. Taking 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. It’s also covering parts of my collection names, so it doesn’t look great. Is there a solution for this?
Thanks for helping me out!

[CJTCoops]

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

[CJTCoops]

I’m having issues with the search, cart, account icons moving to the far right of the screen. Did you have this issue in Debut theme?

[GG9]

Sorry for the late reply! I purchased a header through Ezfy which worked great. But I already switched to a new 2.0 theme, so it’s not required anymore. I’d recommend switching to a 2.0 theme anyway.

[VictoriaCT]

Hi I know this is an old thread but I have used the code on debut theme it works great but I would like to change the colour of the header? Can anyone please help thank you so much