[Resolved] Off Canvas Menu

Home Forums Support Off Canvas Menu

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1387317
    Robert

    Hi,
    I am using the Off Canvas for Mobile option.

    Is it possible to have the sub items in the menu nav items showing immediately rather than having to click on an arrow to get them to open?

    When using a mobile the arrow is easy to miss and then you open the primary menu page rather than going directly to the desired sub item page.

    Thanks,
    Rob

    #1387362
    Robert

    I think I have found an answer from a previous request. I didnt really know what the terms were for what I was trying to do but Leo has posted this in the answer to:

    Support › Expand submenu on mobile while on subpage

    July 10, 2017 at 4:27 am


    @media
    (max-width: 768px) {
    .main-navigation .main-nav .current-menu-item .sub-menu,
    .main-navigation .main-nav .current-menu-ancestor .sub-menu {
    opacity: 1 !important;
    display: block !important;
    left: auto;
    right: auto !important;
    position: relative;
    width: 100%;
    clear: both !important;
    top: auto;
    float: none;
    }

    .current-menu-item .dropdown-menu-toggle,
    .current-menu-ancestor .dropdown-menu-toggle {
    display: none;
    }
    }

    I don’t however know what to do with it or where to add it?

    Thanks,

    #1387406
    David
    Staff
    Customer Support

    Hi there,

    that is CSS – this document explains how to add it:

    https://docs.generatepress.com/article/adding-css/

    But for the Off Canvas use this CSS instead:

    #generate-slideout-menu.main-navigation ul li ul {
        display: block !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        height: auto;
        overflow: visible;
    }
    #1387424
    Robert

    Hi,
    Thanks for the speedy reply.

    That works great but can I have the Sub Menu indended or with someway of showing its a submenu?

    Cheers,

    #1387435
    Leo
    Staff
    Customer Support

    Try this CSS as well:

    #generate-slideout-menu.main-navigation .main-nav ul ul li a {
        padding-left: 40px;
    }
    #1387447
    Robert

    Great, thanks guys.

    #1387515
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.