[Resolved] Make Entire Menu Scrollable

Home Forums Support Make Entire Menu Scrollable

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1502682
    Daniel

    Hello

    Can I make the entire menu scrollable instead of only the subitems? https://prnt.sc/v62zyn

    Like for example 9gag.com or facebook.com (desktop version)

    Here is my CSS for the submenu.

    @media (min-width: 769px) {
        /* Fix height and set scroll on parent item */
        .dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children {
            max-height: 350px;
            overflow-y: auto;
        }
        /* Stick parent item on scroll */
        .dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children>a {
            position: sticky;
            top: 0;
            position: -webkit-sticky;
            z-index: 1;
        }
        /* Force height of submenu */
        .dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children>ul {
            max-height: 100%;
            position: relative;
            z-index: 0;
        }
    }

    Thanks!

    #1503288
    David
    Staff
    Customer Support

    Hi there,

    so do you no longer want the sub menus to be scrollable ? As you can’t really have a scrollable sub menu inside a scrollable menu.

    #1506077
    Daniel

    I think it would be better if the menu was entirely scrollable, not the sub-menu. Like Something they have done here: https://mdbootstrap.com/

    #1506196
    David
    Staff
    Customer Support

    You would first need to remove the CSS you added previously to make the sub menus scrollable.
    Once thats done we can take a look if its possible to make your whole menu scrollable.

    #1506514
    Daniel

    ok, I have created a stagging site (https://www.staging2.memescout.com/) and removed the CSS I added previously.

    #1506549
    David
    Staff
    Customer Support

    Try this:

    @media (min-width: 769px) {
        .main-navigation:not(.slideout-navigation) .main-nav {
            max-height: calc( 100vh - 180px);
            overflow-y: auto;
        }
    }
    #1507116
    Daniel

    Thanks! It Works…

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