Navigation Menu Too Long

Hello Milton,

Is there any way that I could re-position/reorient the drop down menu for “Course Books” so that it’s not a straight line down with only one category per row but rather a drop down that has several categories in each row?

I don’t think that there is an easy way to do it, but you can try to add this CSS code in the Customize → Additional CSS section as a workaround:

@media (min-width: 992px) {
    #masthead .main-navigation ul ul li {
        padding: 4px 10px;
        line-height: 1.3;
    }

    .main-navigation ul ul.sub-menu {
        max-height: 390px;
        overflow-y: scroll;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hey Roman,

Thank you for this line of code! I think this is a great work around. By any chance, is there another call-out for the overflow-y section besides just the scroll? The reason why I ask is because the other menu items don’t need the scroll and was wondering if there was another call-out that could essentially work for the other shorter menu items. But in general, would love to know if there are any call-outs besides the “scroll.”

Best,
Milton

Hello Milton,

You can use the auto value instead of the scroll value, so it will not affect your short submenus (you will not see empty scrollbars). Also you can check this link for more information regarding the overflow CSS property:
https://www.w3schools.com/css/css_overflow.asp

Kind Regards, Roman.

This worked perfectly, thank you so much Roman! Also thanks for the source, really appreciate that.

You are welcome Milton!

Kind Regards, Roman.