Hi!
We have a custom menu with a large list of items that unfortunatelly does not fit into the screen on smaller screens... (please, see the image). We use Moodle 2.9+ and theme Aardvark.
Is there a CSS way to fix this problem? To make it wrap somehow for example...?
I will appreciate your help a lot!!!
Hi,
I am not able to test this out as I am having some big problems updateing my test server.
There is a way to do this by adding max-height: 300px; and overflow: auto; to the dropdown class. So the CSS might look like this:
.dropdown { max-height: 300px; overflow: auto; }
Hope that helps?
Mary
Thank you for the idea, Mary!
Unfortunately, it resulted in this: 
The other thing I tried was:
body.jsenabled .dropdown.langmenu:hover > .dropdown-menu,
body.jsenabled .dropdown.langmenu.open > .dropdown-menu {
display: block;
max-height: 300px; overflow: auto;
}
But this did not make any change...
Hi,
I have just sent you a message.
Mary
Hi Arturs,
Remove that CSS as it is not doing any good at all.
Here is a link to a solution using CSS which may help, but I do not have time to test it out today.
https://css-tricks.com/long-dropdowns-solution/
The alternative is just add one item called "Site map" that links to a page and add all your links on the one page under different headings.
Hope this helps?
Mary
Hi Mary,
I copied the CSS code, but I am not sure how to adjust it in order to make it work...
This is the original solution:
{ margin: 0; padding: 0; }
body { font: 15px Helvetica, Sans-Serif; }
html { overflow-y: scroll; }
#page-wrap { width: 720px; margin: 25px auto; }
p { margin: 0 0 8px 0; }
a { text-decoration: none; }
img { vertical-align: middle; }
a img { border: 0; 180}
ul { list-style: none; }
h1 { margin: 0 0 10px 0; }
/*
LEVEL ONE
*/
ul.dropdown { position: relative; width: 100%; }
ul.dropdown li { font-weight: bold; float: left; width: 180px; background: #ccc; position: relative; }
ul.dropdown a:hover { color: #000; }
ul.dropdown li a { display: block; padding: 20px 8px; color: #222; position: relative; z-index: 2000; }
ul.dropdown li a:hover,
ul.dropdown li a.hover { background: #F3D673; position: relative; }
/*
LEVEL TWO
*/
ul.dropdown ul { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; }
ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; }
ul.dropdown ul li a { display: block; background: #eee !important; }
ul.dropdown ul li a:hover { display: block; background: #F3D673 !important; }