Skip to content

fix: vertically align nav arrow with p5 logo using flexbox#1430

Merged
doradocodes merged 2 commits into
processing:mainfrom
kiranShamsHere:fix/arrow-vertical-alignment
Jun 11, 2026
Merged

fix: vertically align nav arrow with p5 logo using flexbox#1430
doradocodes merged 2 commits into
processing:mainfrom
kiranShamsHere:fix/arrow-vertical-alignment

Conversation

@kiranShamsHere

Copy link
Copy Markdown
Contributor

Closes #1295

Changes

  • Added align-items: center to .logo flex container on desktop
  • Removed manual margin-top: 7.5px from .desktopMenuLabel
  • Set height: 100% on logo anchor tag to prevent SVG collapse

Before

image

After

image

Testing

  • Verified on desktop viewport at localhost:4321/reference/
  • Arrow is vertically centered with p5 logo
  • Logo renders correctly with no collapse

@kiranShamsHere

Copy link
Copy Markdown
Contributor Author

Hi @doradocodes, I've opened a PR for this issue: #1430

The fix uses flexbox alignment (align-items: center) on the .logo container and removes the manual margin-top offset.

Before/after screenshots are included in the PR.

@Nwakaego-Ego

Copy link
Copy Markdown
Collaborator

Hi @kiranShamsHere thank you for this PR. I tested the fix both in DevTools on the live site and locally on the branch. The arrow is now vertically centred with the p5 logo on desktop as expected. Mobile layout is not affected.

cc @doradocodes

@doradocodes

Copy link
Copy Markdown
Contributor

@Nwakaego-Ego Thanks for testing, and @kiranShamsHere thanks for your work! Will merge this now.

@doradocodes doradocodes merged commit a991987 into processing:main Jun 11, 2026
7 checks passed
doradocodes added a commit that referenced this pull request Jun 11, 2026
…1440)

* fix: vertically align nav arrow with p5 logo using flexbox

* fix: set explicit height on logo anchor to prevent SVG collapse

Co-authored-by: Kiran Shams <kiranshamsdhiloo@gmail.com>
Co-authored-by: kit <1304340+ksen0@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[main & 2.0] Arrow in side navigation of the primary menu needs to be vertically aligned to the p5 logo

3 participants