[Resolved] Problem with vertical menu

[Alberto]

Hi

First of all, sorry for my English.

I have a problem with the vertical drop-down menu. It is a menu that has many items, therefore it lengthens a lot down. This makes the submenues of the last items overlap the footer, which does not look good.

Is there any way for the last submenues to open up?

I am interested in maintaining that those from above continue to open downwards.

Thank you in advance.

[David]

Hi there,

could you provide a link to the site?
You can edit your first post in this topic and use the Site URL field to share it privately.

[Alberto]

Hi David.

I already put the url.

Thanks!

[David]

Can you add a custom CSS Class to that particular parent menu item of: hover-up
And then try this CSS:

@media (min-width: 769px) {
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.hover-up:hover ul {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 400px;
        transform: translateY(calc(-100% + 40px));
    }
}

[Alberto]

David,

It does not work…

I have other css codes configured … maybe that’s the problem …

This is the code:

@media (min-width: 768px) {
    .inside-wc-product-image {
        width: 100%;
    }
    .woocommerce ul.products li.product a img {
        height: 200px; /* adjust height */
        object-fit: cover;
    }
}

.woocommerce ul.products li.product h2 {
    line-height: 2.5ex;
  	height: 7.5ex;
  	overflow: hidden;
}

.inside-right-sidebar {
    display: flex;
    flex-direction: column;
}

.inside-right-sidebar .widget {
    order: -1;
}

.inside-right-sidebar .secondary-navigation {
    margin-top: 30px;
}

.site-header {
-webkit-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
-moz-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
z-index: 1000;
}

.sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
-moz-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
z-index: 1000;
}

@media (min-width: 769px) {
    .dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.hover-up:hover ul {
        display: grid;
        grid-template-columns: 50% 50%;
        width: 400px;
        transform: translateY(calc(-100% + 40px));
    }
}

[David]

You need to add the CSS class of hover-up to that parent menu item:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes.

If you can add that and the CSS and if theres a problem, leave it in place and let me know.

[Alberto]

Spectacular!

Now it works!

Thanks a lot, David!

[David]

Awesome – glad to be of help – i thought 2 columns would help otherwise it flowed off the top of the page lol.

[Author]

Posts