Docs

[lucagiaicheca]

Hello,

I use Ethos, and I have a very long dropdown menu, and this is not scrollable, so many rows are hidden by window border. I have read two topics about this, but none of them seems to work for me, I checked this code:

body .x-navbar {
    max-height: 630px;
    overflow-y: scroll;
}

But it makes dropdown menu go behind the post underneath, so I tried to add

overflow: auto !important;

but it does not work either. What happens is that the whole menu stays in a small div which is actually scrollable, but I need the menus to overflow as always, and being scrollable when needed.

You can check it here: http://noisiamopoesia.it/.

Follow: Poesia a scuola > antologia poetica > Istituto Foscolo > Ugo foscolo 2016-17 > here is the problem.

I have a long list of classes and I cannot see them.

Any help will be so much appreciated! Kind Regards.

[Rue Nel]

Hi There,

Thanks for writing in! The sub menu were positioned as absolute. An element can have a scrollable content only happens if it is positioned as relative. In this case, it is a bit tricky. You cannot just set the navbar overflow to scroll. It is the sub menus that needs it but since it is a list tag, it would be difficult to have it as scrollable. The very best way I can recommend it to break down your classes into a group of sub menu so that it would be much readable and be able to display all of you classes.

Hope this helps.

[lucagiaicheca]

Hello, I already thought about it, but a new issue comes!

Horizontal space is not sufficient, so I cannot see the list in any case, because it hides beyond the left margin of the page…

Do you think I can make my menu position relative? How can I do it? Is there any other soultion to this problem?

Thanks for help 🙂

[Paul R]

Hi,

You can try adding this in Custom > Edit Global CSS in the custommizer.

.masthead-inline .x-navbar .desktop .sub-menu {
    height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
}

Hope that helps.

[Author]

Posts