Archived topic

Mega Menu Drop Down Sub Menu Width Control?

5 replies · Started by Derek on November 13, 2019

Viewing posts 1–6 of 6

November 13, 2019 at 1:56 pm #1062387

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.

November 13, 2019 at 3:31 pm #1062445

Hi there,

try this CSS:

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

November 13, 2019 at 4:03 pm #1062455

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?

November 13, 2019 at 4:36 pm #1062473

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 */
}

November 13, 2019 at 11:23 pm #1062642

That's perfect! Thanks again, David.

You are truly a CSS god.

Thank you!

November 14, 2019 at 4:15 am #1062817

Awesome - glad to be of help.

This archived topic is closed to new replies.