[Resolved] Make Primary Menu Scroll-able

Home Forums Support [Resolved] Make Primary Menu Scroll-able

Home Forums Support Make Primary Menu Scroll-able

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1447681
    Daniel

    Hello

    I have a lot of items on the menu, is it possible to make it scrollable? Like 9gag.com has? For example, I want to show like 5 items, and then if the menu has more than 5 items I want to make it scrollable.

    Thanks!

    #1447682
    Leo
    Staff
    Customer Support
    #1447695
    Daniel

    I have tried that but it doesn’t work. https://prnt.sc/uj44wy

    Any other ideas?

    #1447843
    Leo
    Staff
    Customer Support

    Can you try this instead:

    .dropdown-click .main-navigation:not(.toggled) ul li:hover>ul {
        max-height: 500px; /* Adjust this height to suit */
        overflow-y: scroll;
    }
    #1447876
    Daniel

    It kind of works, but it only shows the menu scrollable once you hoover over it. If you don’t hoover over it display’s all items in the menu. You Can test it here: https://www.staging2.memescout.com/

    It also doesn’t work on mobile, I have checked on my phone.

    #1447945
    Leo
    Staff
    Customer Support

    Your staging site doesn’t quite work for me.

    This is what I’m seeing:
    https://www.screencast.com/t/LQbx6OpmFEE

    Looks like it might be some caching error.

    #1447989
    Daniel
    #1448287
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    /* Fix height and set scroll on parent item */
    .dropdown-click .main-navigation:not(.toggled) ul>li.menu-item-has-children {
        max-height: 300px;
        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;
    }
    #1448908
    Daniel

    It worked for Desktop & Tablet but when I test it on my cell phone it doesn’t display all menu items. I have also tested it on https://ready.mobi/ and it didn’t display all menu items.

    I have updated the css code you gave me on my live website: https://www.memescout.com/

    #1448926
    Leo
    Staff
    Customer Support

    Let’s make the code desktop only like this:

    @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: 300px;
            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;
        }
    }

    As for mobile, with that many menu items, I think the best solution would be to use the off canvas panel:
    https://docs.generatepress.com/article/off-canvas-panel-overview/

    #1448933
    Daniel

    It works fine in the WordPress Customizer, https://prnt.sc/ujn66u, anyway we can make it scrollable on mobile?

    #1448973
    David
    Staff
    Customer Support

    I am not sure thats possible – i can take a look but your staging site URL is not working.

    #1448985
    Daniel

    I have applied the css on my live site, http://www.memescout.com

    #1449022
    David
    Staff
    Customer Support

    Try this:

    /* Fix height and set scroll on parent item */
    .main-navigation ul>li.menu-item-has-children {
        max-height: 350px;
        overflow-y: auto;
    }
    /* Stick parent item on scroll */
    .main-navigation ul>li.menu-item-has-children>a {
        position: sticky !important;
        top: 0;
        position: -webkit-sticky !important;
        z-index: 1;
    }
    /* Force height of submenu */
    .main-navigation ul>li.menu-item-has-children>ul {
        max-height: 100%;
        position: relative;
        z-index: 0;
    }

    I am not sure how it will behave on a real touchscreen device.

    #1449831
    Daniel

    Hello

    Yeah, that kind of works but not on all mobile devices.

    So I was thinking to use a different approach, instead of making only sub menu scroll able I was thinking to make the entire menu scroll able once the height of the menu reaches over 500 px.

    Like this website, https://9gag.com/ has the entire menu scroll able. Is it possible to do something like that?

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