Sub-menu formatting

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.

Hi there,

try this:

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

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

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.

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

How about this:

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

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.

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