Fix Navbar Layout Cut-off for iPad Pro and Nest Hub Max and all (992px - 1350px) devices
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
🤖 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.
:thumbsup: All image files/references (if any) are in webp format, in line with our policy.
🤖 I'm sorry @richarddushime, but I was unable to process your request. Please see the logs for more details.
✅ 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.
✅ 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.
✅ 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.
✅ 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.
✅ 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.
✅ 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.
✅ 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.
✅ 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.
✅ 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.