Twenty Twenty-One: alignment of site title and navigation links

[vijaysinh9094]

I am experiencing a text alignment issue on my WordPress website, specifically with the title "WordPress-Develop" and the navigation links, when viewed on different screen sizes. The text alignment is not adapting correctly to various devices, resulting in a misaligned display.

affected devices: Tablet

Expected Behavior:

The text should be centered and aligned properly on all screen sizes, ensuring a responsive and visually appealing design.

Current theme: Twenty-twenty one.

[poena]

Hi @vijaysinh9094 and welcome to WordPress Trac!

I am not sure I understand correctly. Are you asking for the site title to be centered, and the navigation to be centered but on the line below?

The theme design needs to continue to match the original design created by the designer.
For this theme, it means that the site title is centered only if there is no main menu assigned.

• On tablets, the site title is aligned to the left. If the menu is long enough to wrap to two or more lines, the title is above the menu.
• On mobile, the site title remains on the left and the menu collapses and uses a menu toggle button.

If the site title and/or menu was changed to be centered, this would change the look of existing live websites, and this change would be unexpected for the site owners.

[sabernhardt]

Thanks for the report!

I think this is about the vertical alignment. The Site Title was ​intended to align with the baseline of the primary navigation menu items. However, the 4-pixel top margin apparently became insufficient before the theme was publicly available.

Technically the parts would not be centered vertically because the branding container can include both the Site Title and Tagline.

[sabernhardt]

Site Title is higher than primary menu at 700 pixels wide

[sabernhardt]

Site Title is higher than primary menu at 1000 pixels wide

[sabernhardt]

uses measurement relative to primary menu padding

[sabernhardt]

with patch: Site Title and primary menu at 700 pixels wide

[sabernhardt]

with patch: Site Title and primary menu at 1000 pixels wide

[sabernhardt]

I subtracted 0.3em (6 pixels with the standard base font size) from the --primary-nav--padding variable.

The two elements should still align if that custom property's value changes, though a change to global spacing and/or typography measurements could make different baselines (which likely happens already with 4 pixels).

[sabernhardt]

CSS patches for Twenty Twenty-One edit the SCSS file(s), and stylesheets are then built from that. Sometimes patches can include the built files, but I chose not to add them.

61633.diff​ aligns the baseline, as originally intended.

Notes about the other two patches:

• Setting align-items: center would not work as well with a tagline, which most sites using Twenty Twenty-One should have (WordPress stopped adding a default tagline in December 2022).
• The Site Title's default font size should not change now.

[karmatosed]

Assigning to myself to test and see about taking from there.

[karmatosed]

In 58726:

Twenty Twenty-One: Fixes alignment of site title and navigation links.

There was a text alignment issue not centering on all screen sizes. This fixes that and centers vertically.

Props vijaysinh9094, poena, sabernhardt.
Fixes #61633.