Build a sticky top navigation bar with Tailwind CSS: a translucent, blurred, bordered bar. Left: logo mark + wordmark. Center/right: horizontal nav links (hidden on mobile). Far right: a ghost "Sign in" link and a solid "Get started" button. Include a hamburger button that appears below md, and a collapsed mobile panel underneath repeating the links and actions. Then add JavaScript to make the hamburger work: toggle the panel, swap the icon between bars and an X, keep aria-expanded and aria-controls honest, close the panel when a link inside it is tapped or when Escape is pressed, and close it automatically if the viewport grows past the md breakpoint while it is open.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a sticky top navigation bar with Tailwind CSS: a translucent, blurred, bordered bar. Left: logo mark + wordmark. Center/right: horizontal nav links (hidden on mobile). Far right: a ghost "Sign in" link and a solid "Get started" button. Include a hamburger button that appears below md, and a collapsed mobile panel underneath repeating the links and actions. Then add JavaScript to make the hamburger work: toggle the panel, swap the icon between bars and an X, keep aria-expanded and aria-controls honest, close the panel when a link inside it is tapped or when Escape is pressed, and close it automatically if the viewport grows past the md breakpoint while it is open.
var BARS = "M4 6h16M4 12h16M4 18h16";
var CROSS = "M6 6l12 12M18 6L6 18";
var button = document.getElementById("menuBtn");
var menu = document.getElementById("mobileMenu");
var icon = document.getElementById("menuIcon").querySelector("path");
function setOpen(open) {
menu.classList.toggle("hidden", !open);
button.setAttribute("aria-expanded", String(open));
button.setAttribute("aria-label", open ? "Close menu" : "Menu");
icon.setAttribute("d", open ? CROSS : BARS);
}
button.addEventListener("click", function () {
setOpen(menu.classList.contains("hidden"));
});
// Tapping a destination should close the sheet behind it.
menu.addEventListener("click", function (e) {
if (e.target.closest("a")) setOpen(false);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") setOpen(false);
});
// The panel is md:hidden, so a resize past the breakpoint hides it visually
// while aria-expanded would still claim it is open.
matchMedia("(min-width: 768px)").addEventListener("change", function (e) {
if (e.matches) setOpen(false);
});
