[Resolved] Submenu items inaccessible

[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.

[Leo]

Hi there,

Would it help if we reduce the menu item height?

[Paul]

Sub menu is now back to default 10 instead of 12 but I don’t want to reduce the parent item height really.

[David]

Hi 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;
}

[Paul]

That is better and not as disorienting. Could the panel be made to fill the height of the viewport rather than cropping?

[David]

The 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.

[Paul]

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.

[David]

If 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…

[Paul]

Yeah Total theme’s default toggle accomodates the menu fine – https://style960.com/sites/nersou/

[Paul]

Reread and changed that to the sidebar for mobile, but still works fine.

[David]

The 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 ?

[Paul]

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.

[David]

Sorry 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;
}

[Paul]

Yeah that looks good. Thanks for your help 🙂

[David]

Thank 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.

[Author]

Posts