[Resolved] Submenu items inaccessible

Home Forums Support Submenu items inaccessible

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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.

    #1467528
    Leo
    Staff
    Customer Support

    Hi there,

    Would it help if we reduce the menu item height?

    #1467565
    Paul

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

    #1467610
    David
    Staff
    Customer Support

    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;
    }
    #1467668
    Paul

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

    #1467677
    David
    Staff
    Customer Support

    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.

    #1467695
    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.

    #1467710
    David
    Staff
    Customer Support

    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…

    #1467809
    Paul

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

    #1467849
    Paul

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

    #1468605
    David
    Staff
    Customer Support

    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 ?

    #1468700
    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.

    #1470428
    David
    Staff
    Customer Support

    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;
    }
    #1472717
    Paul

    Yeah that looks good. Thanks for your help 🙂

    #1472731
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.