Using version 9.4.5, php 8.2.29, we have 20 sub-pages nested in one of our top menu options. The drop down menu cuts out the final 4 entries when browser is in 100% (tested in Chrome, Firefox and Edge).
Is it possible to make a scrollable drop down menu so all subpages are accessible?
Attached are images of the current menu navigation at 100% and 80% view.
Thanks for the suggestions. For the site’s needs, the overflow-y: auto makes the most sense at this time. I am new to coding script (in general and for concrete) and am having difficulty making the custom CSS work.
Can anyone review my code and offer suggestions on how to get it to work?
/* Enable vertical scrolling for tall dropdown menus /
.primary-header .dropdown,
.primary-header .sub-menu,
.primary-header .menu ul ul {
max-height: 400px !important;
overflow-y: auto !important;
overflow-x: hidden; / Prevent horizontal scrollbars /
}
/* Make sure nothing up the chain clips the dropdown */
.primary-header,
.desktop-nav,
.desktop-nav .nav,
.desktop-nav .nav > li.has-submenu {
overflow: visible !important;
}
/* If the theme sets a fixed height inline or via CSS, neutralize it */
.desktop-nav .nav > li.has-submenu > ul.is-submenu {
height: auto !important;
}
/* Ensure the submenu can size itself when open */
.desktop-nav .nav > li.has-submenu:hover > ul.is-submenu,
.desktop-nav .nav > li.has-submenu:focus-within > ul.is-submenu {
max-height: 600px !important;
overflow-y: auto !important;
}