Default Twenty Twenty Two Theme has no padding between menu items on Safari

You can select “Space between items” in the Header Template controls.
See this page.

It’s likely you’re seeing this issue because the flexbox gap property being used to manage spacing in the menu is not supported in Safari before 14.1: see https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/.

If possible, try testing in Safari 14.1 or higher to see if the menu spacing appears as expected.

You can select “Space between items” in the Header Template controls.
See this page.

@andynick That sounds promising, and the web site you linked to does have lots of space between the menu items under my version of Safari. But I’m still a relative beginner to WordPress, and can’t find the header template controls option you are referring to. When I select “Template Parts”, “Header”, and then the “Navigation Block”, I see options to change Justification, Orientation, wrap, color, and typography, but that’s it – no option for “Space between items”. Where would I find that option?

Thanks!

It’s likely you’re seeing this issue because the flexbox gap property being used to manage spacing in the menu is not supported in Safari before 14.1: see https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/.

@chthnc I think you’re likely on the right track, Daniel. I found another thread (I should have copied the link when I found it, but can’t find it now) that mentioned something similar. Their suggestion for a workaround was to add:

.wp-block-navigation .wp-block-navigation-item:not(:first-child) {
    margin-left: var(--wp--style--block-gap, 2em);
}

as Additional CSS to work around the problem. I tried, and at least at first glance, it seems to work. But what I’m not sure; does this change the rendering detrimentally for newer browsers which do support flexbox gap properly, or is it there nothing to be lost by using the patch?

Though I could theoretically upgrade my own copy of Safari, that can’t be my “solution” since I’m writing the page for people who may have that version (or older) of Safari. Safari 14.0.2 is only about a year old, so it is still in active common use by my prospective clients (14.1 and later have been out for less than a year). So as far as finding issues with browsers, I’m actually glad I don’t have the latest and greatest version of Safari installed, otherwise I wouldn’t have found this problem – I figure my web site should be visible to browsers at least a few years old.

Thanks!

@charrois

does this change the rendering detrimentally for newer browsers which do support flexbox gap properly, or is it there nothing to be lost by using the patch?

Yes, it will almost certainly mean the spacing in browsers that support flexbox gap will be the gap value + the margin value.

For simplicity, I think the way I’d approach this would be to use the new margin CSS and remove the gap value. This way, all browsers will share the same type of spacing.

To do this: it looks like Twenty Twenty-Two has the following to set the gap:

.wp-block-navigation, .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-container-content {
    gap: var(--wp--style--block-gap,2em);
}

…so what you could do is add the following CSS to your child theme to override it:

.wp-block-navigation, .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-container-content {
    gap: 0 !important;
}

The use of !important feels valid here because it’s being applied to something you purposefully want to happen.