Sub menu dropdown won’t scroll

[Diana]

we have a lengthy sub menu using the Stax theme navi menu and on desktop there is no way to scroll to the bottom, it cuts off and does not move down…is there a way to fix this? attaching screenshot or link for reference is OTPA Events nav main menu, sub menu OTPA Events: https://otpa.dreamhosters.com/otpa-events/

Attachments:

You must be logged in to view attached files.

[Diana]

Additionally, with the CSS code you had supplied to make the dropdowns open to the left instead of right so they didn’t run off page, it caused all dropdown items to stop working on desktop for main menu items that feature sub dropdowns, only the columns that just have one level of dropdowns, but they all work on mobile.

So for example, on https://otpa.dreamhosters.com/
Resources Main menu has sub dropdowns off Preservation and Education, those sub dropdown menu items work, but none of the main Resources links work.

I removed this code and they work again, but may make the right hand side dropdowns run off page again (and still no way to scroll to bottom of list)

@media (min-width: 782px) {
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
left: -240px !important;
max-width: 200px;
}
}

Attachments:

You must be logged in to view attached files.

[David Morgan]

Hi Diana,

Sure, we’ll be happy to help.

1. Regarding the lengthy menu, I think the easiest fix here is to decrease the font size slightly:

.wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation-item a {
    font-size: 75%;
}

2. In regards to previously provided CSS, try this instead:

@media (min-width: 782px) {
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        right: 100%;
        left: auto;
    }
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .wp-block-navigation__submenu-container::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    padding: 0;
}

I hope this helps.

Thanks!

[Diana]

Hi, unfortunately neither of those codes worked. It didn’t change the text size at all, and it made the sub domain open on the right, but again none of the link items were clickable, same as before…

[David Morgan]

Hi Diana,

Did you remove the previous styles affecting the menu before adding these?

Also, can you leave the provided styles active on the site for long enough for us to inspect how they have been added, and if there are any other styles overriding the provided styles?

Thanks!

[Author]

Posts