Mega Menu Drop Down Sub Menu Width Control?

[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.

[David]

Hi there,

try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Derek]

That’s perfect! Thanks again, David.

You are truly a CSS god.

Thank you!

[David]

Awesome – glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts