Troubleshooting Sticky Menu Error

Support
#1

So this is a strange error that I’ve never seen before. I believe it’s related to a previous topic I had posted here: Sticky Submenu

Basically, there is a section on the desktop view of a page that seems to break the sticky header/navigation of the site only on mobile.

Top of Page
While you’re at https://tappounimechanical.com/commercial-mechanical-services/ on mobile and hit the hamburger menu, the navigation appears off-screen and to the lower right.

Scrolling Through Top Section
While you scroll through this section it looks like the main site header is having some kind of conflict with the sticky submenu which follows the user down the page on desktop. I have this menu hidden on mobile and it doesn’t give me any issue on desktop, but the top sticky menu is unable to follow the user down the page like it does on every other page.

Scrolling Past Top Section
Once the user scrolls past the section in question, the sticky top header pops into place and functions normally. What makes this interesting is that if you scroll back to the top of the page again, the error goes away entirely.

Could you help me figure out what’s going wrong here?

Thank you so much!

#2

Hello @Nuera,

Thanks for writing to us.

I checked your given page URL it seems that the menu is working fine at my end. I have tested it on my iPhone 7+. It might be the issue of the browser cache, I would suggest you please clear your browser cache and then check it again.

Thanks

#3

Thanks Prakash!

After testing further on our end, it seems to be an android-only error. Do you think you could test again on an Android device and get back to us with your thoughts?

Thanks again!

#4

Hey @Nuera,

On Android and even just the emulator in the browser dev tools, after your page is loaded, you can actuallly swipe left and you’ll see a blank area on the right. That means something is causing horizontal scrolling on your page.

To help discover or narrow down what is causing the issue, please do the following:

  1. Testing For Plugin Conflict
  2. Child Theme
  3. Css/Js Customization
  4. Disable all Scroll Effects in your page.

If the issue is fixed by doing the 1st 3 steps, you will need to reach out to the plugin developer if it’s a plugin causing the issue. Or, have a coder investigate your custom codes if it’s custom codes causing the issue.

If it’s the scroll effects or if the issue persists after doing all those, we’ll investigate further.

image

Thanks.

#5

Ok, we isolated that it is, in fact, the custom sticky menu that appears on desktop that is creating the conflict. This is the css we have on the page for it:
/* Sticky Menu */
.stickysidemenu {
position:-webkit-sticky;
position:sticky;
top:80px;
z-index:99;
}
body {
overflow-x:visible
}

Do you know of a better way to make this sticky menu work - OR - is there a way we can truly hide it on desktop so as not to get this very isolated conflict on Android?

Thanks!
G

#6

Hey @Nuera,

That old CSS guide, which I believe you’ve taken here in the forum, is only advisable if there’s no overflowing elements on the page.

In your case, you will need a custom solution. Regretfully, as you might already know, we do not provide custom development as part of theme support. You might want to have our Elite team create a solution for you. You can check the service here: https://theme.co/elite

Thank you for understanding.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.