- This topic has 17 replies, 3 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
September 17, 2020 at 12:25 pm #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!
September 17, 2020 at 12:27 pm #1447682Leo
StaffCustomer SupportHi there,
Would this help?
https://generatepress.com/forums/topic/make-sub-menu-scrollable/Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2020 at 12:42 pm #1447695Daniel
I have tried that but it doesn’t work. https://prnt.sc/uj44wy
Any other ideas?
September 17, 2020 at 3:45 pm #1447843Leo
StaffCustomer SupportCan 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2020 at 4:54 pm #1447876Daniel
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.
September 17, 2020 at 6:49 pm #1447945Leo
StaffCustomer SupportYour staging site doesn’t quite work for me.
This is what I’m seeing:
https://www.screencast.com/t/LQbx6OpmFEELooks like it might be some caching error.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2020 at 7:44 pm #1447989Daniel
Try this one: https://www.staging16.memescout.com/
September 18, 2020 at 2:25 am #1448287David
StaffCustomer SupportHi 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; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2020 at 8:39 am #1448908Daniel
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/
September 18, 2020 at 8:51 am #1448926Leo
StaffCustomer SupportLet’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/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2020 at 8:57 am #1448933Daniel
It works fine in the WordPress Customizer, https://prnt.sc/ujn66u, anyway we can make it scrollable on mobile?
September 18, 2020 at 9:38 am #1448973David
StaffCustomer SupportI am not sure thats possible – i can take a look but your staging site URL is not working.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 18, 2020 at 9:45 am #1448985Daniel
I have applied the css on my live site, http://www.memescout.com
September 18, 2020 at 10:29 am #1449022David
StaffCustomer SupportTry 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 19, 2020 at 6:52 am #1449831Daniel
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?
-
AuthorPosts
- You must be logged in to reply to this topic.