Header menu stuck on scroll

[nblund]

Hi there.

On smaller screens of horizontal format (<768px), my menu is supposed to scroll as it doesn’t fit in to the viewport. But it doesn’t scroll. I have read your threads, deactivated plugins, updated everything etc. but the issue remains. Would you please have a look at the Bar named ‘Menu load small scr ORIG’ in my header - or any menu on off canvas for that matter?

Login credentials in secure note. Thanks.

[nabeel]

Hi @nblund,

Thank you for reaching out to us. The issue seems to be happening because of your custom CSS in the Header CSS section (see screenshot)

Try removing the highlighted lines of code and see if the issue remains. If the issue persists then please remove custom CSS entirely from Header CSS and Global CSS (make sure to take a backup of your code first). There seems to be conflict between the native functionality of the Navigation element and your custom CSS. Taking the conflicting part out should resolve the issue.

Let us know how this goes!

[nblund]

Thanks @nabeel.
Unfortunately that didn’t do the trick.
Do you have other suggestions?
Cheers

[tristup]

Hi @nblund,

I have checked your website on a smaller screen and also on my Android mobile phone and found the Navigation is scrolling fine. Can you please provide any video that helps us to recognize the problem?

Thanks

[nblund]

Hi again.

Please find attached in secure note a link to the video that demonstrates the problem. I have tried solving the issue without luck. But now (as shown in the video) you will see that the content on the lower part (logo section) of the canvas, appears top right, if screen is not big enough. I would, however, expect it to stay below the menu content and appear upon scroll.

Also, I discovered other symptoms that may or may not be related:

1
Working with the header in Cornerstone appears occasionally to be surprisingly slow.

2
Once in a while this error message appears:

The preview could not load due to the iframe response being incomplete. This is most often related to a plugin conflict, or customisations introducing a php error.

The message typically disappears upon page refresh.

3
In Safari (iPhone), when shifting from vertical to horizontal view and back, the web page format locks meaning it doesn’t go back to vertical when turning the screen / iPhone back to vertical (please refer to the last section of the video).

Look forward to hearing from you. Thanks a lot.

[christian]

Hey @nblund,

I tested in iOS 16 and 13 and scrolling works. It also works even in the browser dev tools

What iOS and Safari version are you using? Please just note that we only support the browser version supported by WordPress.

Could you also try disabling the Off Canvas Body Scroll?

Thanks.

[nblund]

Hi again.

I use the latest Safari version (16.5.2). The issue remains the same in Chrome. I agree the scrolling works, but not as planned. If the viewport is high enough the logo will remain UNDER the menu. When the viewport decreases, the logo will jump up on the righthand side of the menu - although I would want it to remain below so the user would see it when scrolling down. I believe your video shows the same. In other words, there seems to be some kind of configuration that stops the user from scrolling down whereby the content is forced up to the right of the menu. (Disabling body scroll doesn’t do the trick).

Do you follow me?

[christian]

Hey @nblund,

Let’s solve the issues one at a time to avoid confusion and for this case to be manageable.

1. I found that with the Body Scroll enabled, it’s hard to scroll. Yes, it can scroll. But, it’s hard
2. For the logo problem, try setting the Div’s shown in the following screenshot to 100vh.

Result:

[nblund]

Hi again,

Thanks so much for helping out.
Body scroll was disabled already (and still is).

With regards to your second suggestion: Setting the suggested divs’ height to 100vh doesn’t solve the issue - the logo div still jumps to the top right instead of being placed below the navigation div.

I also tried setting the width of the same divs to 100%, but it had no effect.

Not that it helped me solve my problem, but for your information, I saw noticed this thread: Content Area Off Canvas - Scrolling issues.

[christian]

Hey @nblund,

This basically boils down to Flexbox and VH settings. For now, I’ve set the following Min Heights to the values shown in the screenshot below.

Then, I’ve set the Flexbox > Vertical > End of your signature Div so the element sit at the bottom.

That all works. I tested in several mobile devices.

Please note that the purpose of suggesting the VH values is for you to know about it. Please learn how Flexbox and CSS units work.

If you need help with layout implementation next time, please subscribe to our One Total Care support.

Regarding the scrolling, it works on my end on actual phones.