Sticky Menu Header No Longer Functioning - Sense Theme

[gmoye]

Hi, 

Unfortunately the sticky function of my menu header stopped working. Neither option will work when selecting "Always" or "On scroll up". Scrolling also looks a little "glitchy" with the background. I had the animation effect on to reveal sections on scroll but that was making scrolling extremely difficult so I turned that off and it helped. It seems some other fix for the menu might have caused this issue.

Store: nicegals.myshopify.com

Pass: test1

Thank you

[PageFly-Richard]

Hi @gmoye 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
html, body {
     overflow-x: auto !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[gmoye]

Hi @PageFly-Richard

That unfortunately did not fix the menu on scroll and it adds excess overflow to the page on the right side that I don't want. I previously had overflow-x: hidden to fix the overflow issue but even when taking that out, the header issue is not fixed. Thank you

[PageFly-Richard]

Instead of use the overflow-x to fix the overflow, i suggest you to fix it in the element only not the whole container.

You can try to move the overflow-x to the Maincontent not the body. Based on Styling rule, sticky will not function with overflow hidden

[gmoye]

That still does not fix the issue with overflow-x: auto.

[gmoye]

@PageFly-Richard  I was able to fix it with this:

<style>
body .shopify-section-header-hidden {
transform: translateY(0%);
}
html.js, html.js body {
overflow-x: initial !important;
}
#MainContent{
overflow-x: hidden;
}
</style>

However, I can't get the overflow to go away on the right side.

Thank you

[gmoye]

Also, the above only fixed the sticky menu on desktop. It is still not functioning on mobile view. Thank you

[gmoye]

I was able to fix both mobile and desktop sticky menu but I am now seeing it is the cart drawer that is causing the overflow. Trying to fix it but still having trouble. I was helped previously because the menu drawer was not scrolling or displaying properly. The fix has likely caused this issue but I'm not seeing anyway to get rid of the overflow without overflow-x: hidden, which I don't want to do because it breaks the sticky menu. Thank you