[Resolved] Mega Menu Drop Down Sub Menu Width Control?

Home Forums Support Mega Menu Drop Down Sub Menu Width Control?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1062387
    Derek

    Hi GP Support Team,

    I am attempting to decrease the width of the sub menu drop downs on my generate press mega menu.

    I am using navigation as header set to full navigation width and full inner navigation width so it can accommodate a slightly larger top level menu.

    The sub menu drop downs are also full width, but it creates a weird super wide menu experience, especially at desktop HD and UHD resolutions.

    I am attempting to decrease the width of the sub-menu drop down so it isn’t so wide. Ideally keeping it relatively centered along the navigation.

    I can send a screenshot via PM if that would help.

    Thank you in advance for your assistance.

    #1062445
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media(min-width: 769px) {
        .main-navigation {
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
        }
    }
    #1062455
    Derek

    That’s great! Thanks so much, David.

    One last small ask – is there a way to still extend the white background full width, even while having a contained nav?

    #1062473
    David
    Staff
    Customer Support

    How did i know that was coming lol
    Try this instead – so remove the above CSS and add this:

    .dropdown-hover .main-navigation:not(.toggled) ul li.mega-menu:hover>ul {
        display: flex;
        justify-content: center;
    }

    Then find this block of CSS from the mega menu ( it’ll be within an @media query), and add the additional property i have commented:

    .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
        max-width: 275px; /* Add this property */
    }
    #1062642
    Derek

    That’s perfect! Thanks again, David.

    You are truly a CSS god.

    Thank you!

    #1062817
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

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