Skip to content

sticky navbar #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul-m-prajapati merged 1 commit into from
Aug 12, 2025
Merged

sticky navbar #187

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Navbar: React.FC = () => {
const { toggleTheme, mode } = themeContext;

return (
<nav className="bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
<nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify no ancestor disables sticky and check z-index collisions

Sticky can break if any ancestor has overflow set (hidden/auto/scroll) or a transform applied. Also confirm no overlays need to appear above the navbar (e.g., modals with equal/lower z). The change itself is fine—this is a precaution.

Run this script to locate where is rendered and scan for nearby overflow/transform usage and z-index patterns across the repo:

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Where <Navbar ...> is rendered (with context):"
rg -n --no-messages '<Navbar' -A 8 -B 8

echo
echo "Scan for possible sticky blockers or conflicts (overflow, transform, fixed/sticky usage) with context:"
rg -n --no-messages -A 3 -B 3 'overflow-(hidden|auto|scroll)|transform|translate|fixed|sticky'

echo
echo "Z-index usage across the codebase (to spot potential collisions with z-50):"
rg -o --no-messages 'z-(\[[^]]+\]|\d+)' | sort | uniq -c | sort -nr

Length of output: 12186

Sticky positioning confirmed; adjust Contact page popup z-index if needed

  • <Navbar> in src/App.tsx lives inside a div.relative.flex.flex-col.min-h-screen wrapper with no overflow-* or transform rules, so position:sticky will work as expected.
  • Repo-wide search found no ancestor classes (overflow-hidden|auto|scroll or transform) that could break sticky.
  • The only other z-50 usage is the success popup in src/pages/Contact/Contact.tsx (around lines 298–304). It currently stacks above the navbar via source order, but if you want overlays to unambiguously sit above the nav, bump its class from z-50 to something higher (e.g. z-60).
🤖 Prompt for AI Agents 
In src/components/Navbar.tsx around line 18 the navbar uses sticky with class
z-50; the Contact success popup in src/pages/Contact/Contact.tsx (around lines
298–304) currently also uses z-50 and can stack above the navbar by source order
— update the Contact popup's tailwind z-class to a higher value (for example
change z-50 to z-60) so overlays unambiguously sit above the navbar, ensuring
the popup's container or overlay uses the higher z-index and no other
conflicting z-classes remain.

<div className="container mx-auto px-6 py-4 flex justify-between items-center">
{/* Logo Section */}
<Link
Expand Down