Tagged: menu
I have a menu item that has 35 sub items. This is making for a very long dropdown menu. Is there a way to make this 5-10 long with a scrollbar in the menu, not the page?
Hi jcameron13!
Yea you could use some CSS like this but it’s not going to look very good. It would be better to just make them into sub menus.
.avia-menu .sub-menu { height: 200px; overflow: scroll; }
Cheers!
Elliott
This is what I was looking for! Thank you!
I would like to understand better what you mean by making them into sub menus?
I am also wondering how do I do this for just that one drop down. I have other main menu items and the part that looks odd is that they all have a 200px dropdown. Is there a way I could use the CSS class on the menu structure? Would I have to do that for each item? Is there a better way to do this?
Hi!
Is it the “products” sub menu? If so change the CSS to this.
#menu-item-6200 .avia-menu .sub-menu { height: 200px; overflow: scroll; }
If you want to make additional sub menus then navigate to Dashboard > Appearance > Menus and indent the menu links to the right.
Cheers!
Elliott
Thanks Elliott,
I tried this for the products page, and it did not work. It is also a different menu the HTML is below. It is for the Course menu item so I am assuming I would use #menu-item-7673 instead of #menu-item-6200. Is that correct? But it did not work for the Products nav or the Course nav. Any thoughts?
looks like when I drop the .avia-menu it works! Thank you so much for your help!