Sticky Menu Header No Longer Functioning - Sense Theme

gmoye
Shopify Partner
13 0 1

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

Replies 7 (7)

PageFly-Richard
Shopify Partner
4322 980 1639

 

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 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

gmoye
Shopify Partner
13 0 1

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
Shopify Partner
4322 980 1639

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

gmoye
Shopify Partner
13 0 1

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

gmoye
Shopify Partner
13 0 1

@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
Shopify Partner
13 0 1

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

gmoye
Shopify Partner
13 0 1

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