- This topic has 14 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
David.
-
AuthorPosts
-
October 1, 2020 at 8:04 am #1467470
Paul
Hi,
Can you please check the mobile menu on the URL below – the sub menu items for ‘Reporting’ are only accessible by scrolling to the bottom of the off canvas panel, then scrolling again on the overlay to dismiss the bottom navbar on Safari mobile.
It’s not very intuitive, and not something I can ignore.
Is there any workaround for this?
Thanks,
Paul.October 1, 2020 at 8:37 am #1467528Leo
StaffCustomer SupportHi there,
Would it help if we reduce the menu item height?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 8:53 am #1467565Paul
Sub menu is now back to default 10 instead of 12 but I don’t want to reduce the parent item height really.
October 1, 2020 at 9:17 am #1467610David
StaffCustomer SupportHi there,
tricky one this. Try adding this CSS and let me know:
.slide-opened .offside-js--init { max-height: 100vh; overflow: hidden; } .slide-opened #generate-slideout-menu { max-height: calc(100vh - 120px); overflow: scroll; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:42 am #1467668Paul
That is better and not as disorienting. Could the panel be made to fill the height of the viewport rather than cropping?
October 1, 2020 at 9:50 am #1467677David
StaffCustomer SupportThe most you can do is reduce the 120px to maybe 60px which is about the height of the browser nav bar. Making it the full height of the viewport will just incur the same issue as before.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:58 am #1467695Paul
Ah right, given I’m using an iPhone SE, the cropping is likely to be more significant on most phones with their larger screen sizes. I might have to look at using a different theme (this menu could well expand from its current state). Thanks for your help.
October 1, 2020 at 10:10 am #1467710David
StaffCustomer SupportIf you have an example site of a ‘better behaving’ off canvas nav then i am happy to take a look at how they are doing it.
But to the best of my knowledge, mobile ‘tab bars’ are generally all of a similar height – around 60px, as this is a fairly UI standard for not taking up to much pixel real-estate whilst keeping clickable elements at finger print size.
The alternative solution is to try the Overlay option to see if that resolves the scrolling issue…
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 11:01 am #1467809Paul
Yeah Total theme’s default toggle accomodates the menu fine – https://style960.com/sites/nersou/
October 1, 2020 at 11:24 am #1467849Paul
Reread and changed that to the sidebar for mobile, but still works fine.
October 2, 2020 at 1:16 am #1468605David
StaffCustomer SupportThe Total Theme also cuts off from being the full height of the viewport. I think its very much one of those ‘workarounds’ that has to exist to deal with device UIs.
Did you resolve the issue ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2020 at 2:45 am #1468700Paul
The toggle menu does cut off. The sidebar which I’ll leave it on for today fills the viewport. Workaround in this instance will be to use Total instead, with GenerateBlocks.
October 3, 2020 at 7:09 am #1470428David
StaffCustomer SupportSorry for the late response – i miss assigned this topic.
What happens if we increase the bottom margin on the Off Cavnas with this CSS:
.slideout-navigation .main-nav { margin-bottom: 80px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 5, 2020 at 3:06 am #1472717Paul
Yeah that looks good. Thanks for your help 🙂
October 5, 2020 at 3:19 am #1472731David
StaffCustomer SupportThank you for feeding back – i am going to do some more tests to see if we can make any improvements in our CSS.
Glad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.