[Resolved] Problem with vertical menu

Home Forums Support Problem with vertical menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1054743
    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.

    captura

    #1054792
    David
    Staff
    Customer Support

    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.

    #1054920
    Alberto

    Hi David.

    I already put the url.

    Thanks!

    #1054959
    David
    Staff
    Customer Support

    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));
        }
    }
    #1054965
    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));
        }
    }
    #1054968
    David
    Staff
    Customer Support

    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.

    #1054985
    Alberto

    Spectacular!

    Now it works!

    Thanks a lot, David!

    #1054988
    David
    Staff
    Customer Support

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.