Archived topic
Off canvas menu
11 replies · Started by David on April 2, 2020
Hello
Hope all is well.
I've used the off canvas menu for my main menu, but needed to add another one on the shop page, to show filters on mobile.
If you view this page and size down to mobile, you will see a filter link, when you click on this a slider comes in from the right side of the page and shows the shop filters...
https://www.buzzgym.co.uk/shop/
This works fine on my computer, but when I view on chrome on my phone, the side filter appears when you scroll to the right, and as you can see by this image at the bottom the page width is wider than it should be as there is a scroll bar that appears...
Any ideas what is causing this?
Thanks
Dave
Hi there,
How are you making the filter slider to come out like that?
Is that custom coded or with a plugin?
Hi
I used this code, as couldn't use 2 off canvas menus...
https://codepen.io/ncerminara/pen/quJpi
Thanks
Dave
So I guess the issue is something to do that code itself?
Am I missing something here?
Yes I believe so
Unfortunately we cannot help with a custom solution from other sources.
Have you tried contacting the code author?
It's probably something to do with the CSS or the location of the hook. Just something I thought one of you may see something simple / obvious that I've missed - David is normally really helpful with anything like this, that's why I thought I would ask.
Thanks
Dave
I only have iOS devices to hand - and neither Safari, Chrome or FF displays this issue.
Is it only a specific device ?
Hi David
If you view it in chrome inspect on a phone view, then scroll to right using keyboard arrows, you will see the problem...
Thanks
Dave
Try adding this CSS:
html {
overflow-x: hidden;
}That did the trick... thanks so much David, that had been bugging me for hours :)
You're welcome
