Sticky header on scroll up not working on home page

[VIB1]

Hi there, still working through this issue: I am currently using the Shopify Ride theme, and I have set the header to “sticky on scroll up.” This seems to work on all pages aside from the home page and I’m wondering how to make it work on the home page as well.

For more context, I did add some code to the theme.liquid code to make the header transparent on the home page, and I believe it’s related.

This is the code I added, and I believe the “margin-bottom” line is causing this issue:

@media screen and (min-width: 1050px){
.header-wrapper {
background-color: transparent;
margin-bottom: -200px
}
}

{%- endif -%} Any ideas how to fix this would be greatly appreciated! [www.vancouverislandinabox.ca](http://www.vancouverislandinabox.ca)

[Dan-From-Ryviu]

Hi @VIB1

You can add this code to your theme.liquid file before tag to check if it solves your issue

{% if template == 'index' %}
body .shopify-section-header-hidden { top: -171px; }
{% endif %}

[PageFly-Theodor]

Hi @VIB1 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Sticky Header On Scroll Up Not Working On Home Page, let’s try this solution:

Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (min-width: 1050px){
.header-wrapper {
background-color: unset !important;
margin-bottom: 0 !important;
}
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

[VIB1]

Hey! This is close, as it resolves the sticky issue, but it create a big white blank space in place of where the header should be.

[PageFly-Theodor]

Can you add code

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    padding: 0 !important;
}

[VIB1]

still seems to have the blank white space

[Dan-From-Ryviu]

Hi @VIB1

Did you try to use my code? Add it to your theme.liquid file before tag

{% if template == 'index' %}
body .shopify-section-header-hidden { top: -171px; }
{% endif %}

[PageFly-Theodor]

You can add it at theme.liquid

[VIB1]

Hrmm, didn’t seem to work

[Dan-From-Ryviu]

Try to update the code to this and check again

{% if template == 'index' %}
.shopify-section-header-hidden { top: -171px !important; }
{% endif %}

[VIB1]

I’d like to keep the transparent background!

[BSS-Commerce]

Hi @VIB1 ,
As I see in your store, the header is still there, maybe because you set the text color to white so it’s not visible. You can try changing the text color to a more visible color so you can see the header. To do that, please find the base.css file and add the following code at the end of the file:

.header__menu-item {
    color: #888 !important;
}