fix: navbar height reduce & make better User Experience#220
fix: navbar height reduce & make better User Experience#220PAVAN-VANAM wants to merge 1 commit intoEswaramuthu:mainfrom
Conversation
|
@PAVAN-VANAM is attempting to deploy a commit to the 007's projects Team on Vercel. A member of the Team first needs to authorize it. |
![entelligence-ai-pr-reviews[bot]](https://avatars.githubusercontent.com/in/932812?s=60&v=4){kind=small}
| border: 1px solid #333; | ||
| } | ||
|
|
||
| /* Navigation Styles */ | ||
| .navbar { | ||
| display: flex; | ||
| flex-direction: column; | ||
| /* Stack items vertically */ | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 1rem; | ||
| padding: 1rem 2rem; | ||
| /* ===== HEADER & NAVIGATION ===== */ | ||
| .header { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1000; | ||
| background: var(--glass-bg); | ||
| backdrop-filter: blur(10px); | ||
| border-bottom: 1px solid var(--border-color); | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| z-index: 1000; | ||
| height: 140px; | ||
| /* Increased height for specific 2-row layout */ | ||
| } | ||
|
|
||
| .nav-brand { | ||
| width: 100%; | ||
| text-align: center; | ||
| padding: 2rem 0; | ||
| background: var(--glass-bg); | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .nav-brand h2 { |
There was a problem hiding this comment.
Correctness: The removal of height: 140px and the switch to position: sticky on .header (line 10) breaks multiple layout dependencies. The mobile .nav-menu (top: 120px/55px) now has incorrect offsets relative to the new dynamic header height, causing visible gaps. Additionally, due to body { padding: 20px }, the header will jump 20px to the top of the viewport upon scrolling and fail to span the full viewport width, unlike the previous fixed implementation.
There was a problem hiding this comment.
I don't thing above changes are not needed I tested everything working fine
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
1 participant
Which issue does this PR close?
14.02.2026_17.00.07_REC.mp4
Rationale for this change
The existing navbar had excessive vertical height due to a large brand section displayed above the navigation menu. This resulted in unnecessary empty space, reduced visible content on initial load, and a bulky appearance—especially on smaller screens.
This change was made to improve visual hierarchy, optimize screen space usage, and enhance overall user experience across devices.
What changes are included in this PR?
nav-brandsectionAre these changes tested?
Yes.
The changes were manually tested across:
Verified:
Are there any user-facing changes?
Yes.
Users will notice: