Looking for a way to add a scrollbar to the courses menu list due to its excessive length (refer to the image below). The fixed top navbar prevents scrolling, making it necessary to implement a scrollbar within the menu itself.
After applying the following CSS:
.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses {
overflow-y: auto; /* or : scroll */
}
An issue arises where the course modules are no longer visible (for example, Orientation Module in the provided image). This is likely due to nesting the sub-submenu within the ul that has overflow-y:auto property. How can this problem be resolved while still allowing the course submenu items to remain visible? Solutions using CSS, jQuery, or any other method are welcome.
The HTML and CSS code is quite complex as it is Moodle-generated. A simplified version of the structure includes:
<ul class='nav'>
<li class='dropdown'>
<ul class='dropdown-menu'>
<li class='dropdown-submenu courses'>
<ul class='dropdown-menu'>
<li class='dropdown-submenu courses'>
<ul class='dropdown-menu'>
<li class='dropdown-submenu course-submenu'>
</li>
.
.
.
</ul>
</li>
.
.
.
</ul>
</li>
</ul>
</ul>
</ul>
EDIT: Although there is extensive CSS contributing to this issue, a snippet is provided below:
.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu {
border: none;
background: #2d2e2e;
padding: 0px;
border-radius: 0px;
max-height: none !important;
}
.navbar .navbar-inner .usermenu .dropdown ul.dropdown-menu.courses{
overflow-y: auto !important;
}