fix: navbar alignment for both initial and scrolled states (#3428, #3429)

[Atul-Chahar]

Related Tickets & Documents

Fixes: #3428 keploy/keploy#3428
Fixes: #3429 keploy/keploy#3429

Description

• This PR addresses the navbar alignment issue on desktop, where the navbar was not occupying the full width of the screen in its initial state.
• The goal was to align the design with keploy.io by having the navbar start at 100% width (top-0, rounded-none) and smoothly transition to the existing "pill" shape (top-6, rounded-full) when the user scrolls down.

Changes

• FloatingNavbar.tsx: Updated the component to use w-full and top-0 when unscrolled, and conditionally apply rounded-none or rounded-full based on the scroll state.
• FloatingNavbarClient.tsx: Adjusted the dropdown maxWidth calculations to support the full-width navbar layout (using 100vw instead of 96vw when unscrolled).

Preview:

screenrecording-2026-01-09_22-30-41.mp4

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• Build Verification: Ran npm run build locally to ensure there were no TypeScript errors or build failures with the new logic.
• Logic Verification: Verified the conditional class application ensures w-full is applied when !isScrolled and w-[82%] when isScrolled.

Demo

• (Live preview recommended as local dev environment ports were unavailable for recording)

Environment and Dependencies

• New Dependencies: None
• Configuration Changes: None

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[amaan-bhati]

Hi @Atul-Chahar Thanks for raising this pr, I reviewed the changes locally, and i have a few suggestions:

• The initial state of the navbar has the correct width, but the elements inside needs to be aligned well, they seem to be scatterred unevenly, the logo, nav elements and the buttons need to be together to maintain the ui. For the initial state you can take reference from the keploy.io landing page navbar, it segregates all the nav elements together (and there is one attention to detail that it aligns well with the other component's width when we scroll down to the sections)
  I have attached a references that explain both the solutions:

(see how all the nav elements are segregated eventhough the bavbar has full width, and also how it aligns to the other section when we scroll down.

• The shrinked state when we scroll down, the subtle animation looks great but it needs to align with the other sections when we scroll down, it needs to have the samw width as the sections below when we scroll down. I have attached a reference image to explain the issue better:

[amaan-bhati]

Hey @Atul-Chahar Thanks for folloeing up on the issue again, I think there has been a missed attention to detail here, The navbar is resized to the sections but there is more to it that is supposed to be taken care of, it needs to align with the content inside of the navbar, there is too much gap between the navbar and the elements inside of it, it needs to be reduced from the left and the right side, this way you can align the content of the navbar and make the navbar align with the sections, the idea is to have a consistent flow for the users. It can be seen as a widely used attention to detail best practice in terms of the ui, i have attached an image for better understanding and also a few references for you to take inspirations from:

• The issue i am talking about:
  When we say the navbar aligns with the rest of the content, we are talking about the elemtents inside of it to align, more like in a straight line, the size of the navbar can be slightly more than the sections, but if we have the content aligned with the sections, it is perfect in terms of the ui and flow.

• References of the alignment property we see often:
  See how all the elements/content is aligned in a straight line to maintain the flow for the eye

Refernece from vercel, see how the content inside of the search bar is aligned with the other elements:

Here is an example from sentry for the reference of making the navbar align with the rest of the sections, see how the elemtents/content is present there in a straight line. (I've marked it with a red line)

• I hope I was able to give nice references for you to make it more precise and perfectly aligned. Thanks for your patience!

[Atul-Chahar]

Sir @amaan-bhati, thanks for the detailed feedback and the references!

I've updated the alignment based on your screenshot. I realized the previous gap was caused by "double indentation" (the navbar had its own margin plus I had added extra inner padding).

Fix Implemented:

I removed the extra inner padding.
I adjusted the navbar margins so that the Logo and Menu items now align perfectly with the start of the "Recent Technology Blogs" content (both start at exactly 84px from the screen edge on desktop).
This should maintain the floating pill look while keeping the content strictly aligned with the sections as requested. ready for your review!