Scroll Drop Down Menu

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.

Best option would be to make it x3 wide and have 3 columns of links.

Should be possible with CSS.

Otherwise, you may be able to put overflow-y: auto or similar to add a scrollbar to the sub nav list itself

You could consider a Mega Menu such as Mega Menu :: Concrete CMS Marketplace by @jb1

1 Like

Thanks for the recommendation. :folded_hands:

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 /
}

Ended up finding the answer using ChatGPT, the following code worked:

/* Limit tall desktop dropdowns and enable vertical scrolling */
.desktop-nav .nav > li.has-submenu > ul.is-submenu {
max-height: 600px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}

/* 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;
}