#61633 closed defect (bug) (fixed)
Twenty Twenty-One: alignment of site title and navigation links
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.7 | Priority: | normal |
Severity: | minor | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | has-patch commit |
Focuses: | css | Cc: |
Description
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.
Attachments (10)
Change History (18)
#2
@
7 months ago
- Focuses ui removed
- Keywords has-patch needs-testing added; needs-patch close 2nd-opinion removed
- Milestone changed from Awaiting Review to Future Release
- Summary changed from Text alignment issue in responsive design on WordPress default theme, affecting title and navigation links. Alignment is not proper on different screen sizes, mostly tablet,. to Twenty Twenty-One: alignment of site title and navigation links
- Version changed from 6.5.5 to 5.6
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.
#3
@
7 months ago
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).
#4
@
7 months ago
- Severity changed from normal to minor
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.
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.
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.