charrois

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!

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!

Thanks – I agree; that sounds like a much more appropriate place to ask!

Hi there. I was going to file a bug report, but looks like this might already be known, and I know it’s better to continue with an existing thread than start a new one. I do have a bit of info to share though that may help with troubleshooting the problem.

I’m just learning WordPress, so I’m still new to this. But I can confirm that the problem exists in Safari 14.0.2 (what I’m using). And even though I can update Safari myself, I can’t release a web site to the public, many of whom might be using the same version of Safari, if the problem isn’t fixed.

I noticed the problem when trying to use the new Twenty Twenty Two theme (and indeed, the sample web page at 2022.wordpress.net has the menu items all smushed together – no padding between them at all, so it’s not just my installation). But I found that in the template parts editor, if I edited the background color of the navigation block to any color at all, replacing the theme default, everything pads out nicely. But then, I’d prefer to use the theme default of transparent – is there a way to specify a custom color that happens to be transparent? I’ve seen screen snapshots that the color picker is supposed to have a transparency slider, but mine doesn’t.

I’m running WordPress 5.9 and it’s telling me there are no updates available, for WordPress, plugins, or themes.

I could try using the CSS hack as mentioned in this thread, but as I’m said I’m new to WordPress – is there a web interface to editing the CSS, or is it a matter of editing the files in place on the server?

Thanks!

Dan