forrtproject.github.io icon indicating copy to clipboard operation
forrtproject.github.io copied to clipboard

Fix Navbar Layout Cut-off for iPad Pro and Nest Hub Max and all (992px - 1350px) devices

Open richarddushime opened this issue 2 months ago • 7 comments

Description

Fixes #195

At 1024px width (iPad Pro, NestHub, or while resizing the screen), navbar links and the "Get involved" button were being cut off due to insufficient horizontal space. The container width at the lg breakpoint (960px) was too narrow to accommodate all navigation items.

Implemented a specialized 2-row navbar layout specifically for the 992px to 1350px screen width range. Row 1: Logo (left) and Icons (right). Row 2: Navigation Links (centered). Visual Separator: Added a subtle white separator line between the two rows to improve visual structure. Content Overlap Fix: Increased the body top margin (130px) for this specific range to prevent the taller navbar from obscuring the page content (e.g., "Framework for..." title).

Standard Behavior Preserved:

< 992px: Retains the standard hamburger menu.

  • 1350px: Retains the standard single-row layout.

Type of Change

  • [x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

  • [x] Tested Locally
  • [x] Manual review / previewed on staging.forrt.org content/webpage changes

Checklist for Content Editors and Non-Developers

  • [x] The content is clear, accurate, and follows community guidelines.
  • [x] All updated content has been previewed on the staging site.
  • [x] All links, references, and formatting have been checked for correctness.
  • [x] The change aligns with the overall style and communication goals.
  • [x] No broken links in text/content

Checklist for Developers:

  • [x] I have attempted to stay aligned to related code in this repository rather than reinventing the wheel.
  • [x] I have performed a self-review of my own code.
  • [x] I have commented my code, particularly in hard-to-understand areas.
  • [x] I have made corresponding changes to the documentation.
  • [x] My changes generate no new warnings.

Additional Notes

richarddushime avatar Nov 21 '25 18:11 richarddushime

🤖 Hi @richarddushime, I've received your request, and I'm working on it now! You can track my progress in the logs for more details.

github-actions[bot] avatar Nov 21 '25 18:11 github-actions[bot]

:thumbsup: All image files/references (if any) are in webp format, in line with our policy.

github-actions[bot] avatar Nov 21 '25 18:11 github-actions[bot]

🤖 I'm sorry @richarddushime, but I was unable to process your request. Please see the logs for more details.

github-actions[bot] avatar Nov 21 '25 18:11 github-actions[bot]

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-26 16:21:13 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 21 '25 19:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-21 20:06:39 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 21 '25 20:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-21 20:29:00 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 21 '25 20:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-21 21:28:16 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 21 '25 21:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-25 10:59:24 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 25 '25 10:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-25 12:11:03 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 25 '25 12:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-25 12:12:29 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 25 '25 12:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-25 12:18:49 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 25 '25 12:11 LukasWallrich

Staging Deployment Status

This PR has been successfully deployed to staging as part of an aggregated deployment.

Deployed at: 2025-11-26 16:00:52 UTC Staging URL: https://staging.forrt.org

The staging site shows the combined state of all compatible open PRs.

LukasWallrich avatar Nov 26 '25 16:11 LukasWallrich