[Resolved] primary sub navigation width overlap

[drew]

In order to accomodate longer menu item labels, I found a thread here with the necessary CSS, which is in place:

.sub-menu .dropdown-menu-toggle {
    position: absolute;
    right: 0;
}
.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
} 

It’s mostly working great but there is some overlap between the longest label character count and the dropdown-menu-toggle arrow: https://www.screencast.com/t/uIvixVaHBSD

This is another one I can’t quite figure out how to adjust so thanks for any insights!

[Leo]

Hi there,

Can you try the second example here? https://docs.generatepress.com/article/menu-item-height-width/#sub-menu-item-width

[drew]

The…

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

…option? If so, yes, that’s what is in place already but I think I may be missing what you’re after.

[Leo]

Can you try removing this part?

.sub-menu .dropdown-menu-toggle {
    position: absolute;
    right: 0;
}

[drew]

No more overlap but it forces the arrow to line wrap and there doesn’t appear to be any right padding: https://www.screencast.com/t/fdqJRGMcRXJ7

[drew]

My apologies, that was my bad; the media query was set to 1204 instead of 1024.

However, after making the in that screencap, both the slide out menu and the mobile menu that drops down from the hamburger menu icon are present when it should just be the slideout menu (I thought).

Here’s a screencast showing the issue better (and flipping to portrait layout to demonstrate the issue isn’t present there).

Does that help?

[Tom]

It may be best just to set a static width for the menu:

.main-navigation ul ul {
    width: 300px;
}

The nowrap method doesn’t work great with the dropdown toggles I’m afraid – I’m looking into a solution for that.

[drew]

Gotcha, that’s def better. I had to adjust the grandchild menus accordingly since some of those have even longer labels.

.main-navigation ul ul ul {
    width: auto;
} 

I was using a mega menu (ubermenu from sevenspark) prior to sewitching this site over and the label lengths were moot. But I was having a lot of issues getting ubermenu to work so I decided to keep it simple and stick with the native nav.

If you’ve ever run across their plugin before and know how to better integrate, I’d love to hear, otherwise, I have a ticket off to them to see if they have ideas.

Thanks for taking the time to weigh on in a Sunday evening, I really appreciate it!

[Tom]

You can build a simple mega menu in GP only: https://docs.generatepress.com/article/building-simple-mega-menu/

Might be worth trying 🙂

[drew]

Very cool, do you know if it works in the right/left aligned layouts or just in full width above/below header layouts?

I’ll certainly work with it but thanks in advance if you have any insights there.

[Tom]

It’s best when using a full width menu. You can always use the navigation logo if you want to keep the menu full width but want a float right effect.

[drew]

Many thanks, I did experiment with it and it’s very straightforward to implement. I actually ended up running into very similar issues with the longer labels. That combined with the amount of time to tweak the styling etc. and it’s probably something better suited for a large number of items with shorter labels.

One thing I can say is if this were available as a premium plugin that provided customizer level styling controls (especially over padding/margins) as well as a way to implement on the actual menu admin panel without needing to use the CSS classes (that’s going to be beyond nearly all of my client skill levels), it would be a real winner!

[Tom]

Will definitely keep that in mind!

In my opinion, it’s best to keep menu item labels short and precise. There’s always exceptions of course 🙂

[drew]

No argument there. The original mega menu layout was a tabbed configuration, which did a great job at containing all of the additional content (most of these menu items had longer descriptions too). Certainly nothing I would recommend as the norm but this was one of those exceptions to the rule.

Nonetheless, it would be great to see more premium level addons over time so long as they fit into maintenance and support bandwidth 🙂

Thanks so much for all the assistance!

[Author]

Posts