[Resolved] Sub-menu formatting

[Dean]

Hello,

I’ve got a small issue where the length of the menu text forces a 2-line height sub-menu item, but where all of the text still appears only on the first line.

I’ve included an admin-only URL where you can see this — if you hover on the Accommodation menu, you will see the entry “KAKADU & KATHERINE” (on the desktop/laptop) stays on one line, but is very close to the expanding arrow (as that has its own sub-menus) without the word “KATHERINE” wrapping onto the bottom line (as it does for example when you look at the Accommodation menu > RED CENTRE > AYERS ROCK / KINGS CANYON).

I imagine there is some kind of right-margin padding in the NAV CSS settings (for the dropdown-menu-toggle), but I’ve “inspected” the element and I can’t see what I should adjust to even force a little extra padding so that the text is forced to wrap for this entry on two lines (I am even happy to do this with a custom css class in the menu settings, if that’s easier) like it does automatically for the AYERS ROCK / KINGS CANYON one mentioned above.

It looks a little awkward because the text doesn’t quite go far enough to intrude into the area used by the expanding “>” symbol, but is double height while being just a single line of text.

Expert advice would really be very much appreciated!

[Dean]

The only other thing I can think to do is add some blank characters or spaces to the end of the word “KATHERINE” — but I don’t want to impact the text appearance on other size devices etc, that seems crude vs a CSS fix so the expansion character toggle has some more padding perhaps to its left.

[David]

Hi there,

try this:

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

[Dean]

Thanks David,

Unfortunately that doesn’t help — it fixes the specific item I mentioned, but then breaks the one that I used as my two-line example (and it’s actually worse, as the text now overlaps the expand character).

See now on that same URL link: Accommodation menu > RED CENTRE > AYERS ROCK / KINGS CANYON … the spacing/alignment looks worse in this example with that CSS addition.

Is there a way to force the wrap sooner on the line, so that it’s got some padding prior to the “>” expand sub-menu character?

I used the customizer to add the CSS globally — should I just apply it to that specific menu item? That doesn’t really help though if other longer text menu items come up in the future — I would prefer to have the wrap trigger a little earlier so the text is on two lines sooner when the menu item has itself enlarged to be two-line height.

Thanks in advance and kind regards, Dean

[David]

Hmmm – aside of the extra space between the menu label and the > i am not seeing a real difference on the Red Center > Ayers Rock label.
Problem is there isn’t a one fits all solution for this type of thing. As each labels line break requirements would vary. So aside of custom CSS for each label (which could be a nightmare to keep on top of) the only other alternative is to adjust the menu label itself.

[Dean]

Hi David,

To make it visually easy to see what I’m referring to, I’ve captured several screen shots about how the text looks, the height of the sub-menu item and the expanding “>” symbol.

(https://imgur.com/a/Oee91fW)

You can see at 210px we have a good width where I have all of the label text on one line (I found I don’t need to use custom CSS, I can just set the sub-menu width in the Customizer under Layout > Primary Navigation).

What the problem is doesn’t really relate to the line length of the label — it’s how the following happens:

1) The label length becomes long enough that it triggers the sub-menu item HEIGHT being two lines

2) … which in turn moves the “>” to suit the new sub-menu height

3) … but, the label text does not wrap at the same point — it can go as wide as the whole width of the pop-up sub-menu area.

For example, see when I drop to 208px (2nd image in the 4 images), the sub-menu height is now doubled.

But then I can drop the width right down to 170px, and the label text still stays on a single line — encroaching into the area that should force it to wrap (as happens to the whole entry at 208px).

You can see, for example, the 190px length, if the “>” has moved down, so should the last word of the label text by this stage (so the “>” left margin is the height of the whole sub-menu item).

What would work better/best is that when the sub-menu height becomes 2 lines (or more), the text cannot extend any further right (so it also moves to two lines at the same width).

Does that explain it better?

Ie, is there a way to make sure the toggle/expansion character doesn’t allow any of the label text to encroach into its zone on the right hand portion of the sub-menu item (ie, in my images, the word “KATHERINE” would move to the second line at the 208px width, when the whole sub-menu item becomes double height and the “>” character moves too).

In that way, it seems to me it could be a “one fits all” solution, as it wouldn’t matter what width you used, the text wouldn’t encroach above the “>” character, but wrap to the new line at the same point the sub-menu item becomes double height.

Hopefully I’ve explained that clearly!

Kind regards, Dean

[David]

How about this:

.main-navigation .main-nav ul ul li.menu-item-has-children>a {
    display: grid;
    grid-template-columns: auto 3em;
}

[Dean]

Thanks David, this works for me, although using the grid container seems to increase the height of all the sub-menu items (I don’t understand the grid layout concepts enough), but I made that 9px instead of 10px in the customizer (Sub-Menu Item Height) so I think overall that works very well.

Thanks for your help.

[David]

Awesome – glad we got that working. And such a simple solution.
I’ll have a look into the height change. Thanks for the feedback.

[Author]

Posts