Navbar

A responsive navigation bar built with plain HTML, CSS, and JavaScript — no frameworks, no dependencies. Sticky on scroll, with a sliding underline that tracks the hovered link, a scroll-spy that keeps the active link in sync with the section on screen, and a full-height mobile panel below 860px.

Preview

State	Behavior
Top of page	Navbar is transparent, sits directly on the page
Scrolled	Navbar turns to frosted glass with a hairline bottom border
Desktop hover	A pill glides to whichever link is hovered, then eases back to the active page
Mobile (< 860px)	Hamburger morphs into a close icon; links slide in from the right with a staggered reveal

Features

• Sticky header, transparent → frosted glass on scroll
• Sliding indicator pill that tracks link position in real time
• Scroll-spy: active link updates automatically as the visitor scrolls through page sections
• Full-height mobile slide-in panel with scrim, Escape-to-close, and staggered link animation
• Keyboard-accessible: visible focus states, aria-expanded / aria-current kept in sync
• prefers-reduced-motion respected throughout

Tech stack

• HTML5
• CSS3 (custom properties, no framework)
• Vanilla JavaScript (no build step)
• Fonts: Sora, Inter via Google Fonts

Project structure

Navbar/
├── navbar.html   # markup — navbar + a short demo page to preview it in context
├── style.css     # tokens, navbar, mobile panel, demo page styles
├── script.js     # sliding indicator, scroll spy, mobile menu logic
├── LICENSE
└── README.md

Running locally

No build tools needed — it's static HTML/CSS/JS.

git clone https://github.com/FazarathAhamed/Navbar.git
cd Navbar

Note: GitHub Pages serves index.html by default. If you enable Pages for this repo, either rename navbar.html to index.html or add a small index.html that redirects to it.

Using it in another project

1. Copy navbar.html's <nav> block, style.css, and script.js into your project.
2. Update the four <a href="#..."> links (and their matching section ids) to point at your real pages or sections.
3. Move aria-current="page" onto whichever link represents the page currently loaded.
4. Restyle by editing the CSS custom properties at the top of style.css — --accent controls the whole page's accent color.

License

MIT — see LICENSE.