The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<header class="nav">
  <a class="logo" href="#"><span>R</span>avindra</a>
  <input type="checkbox" id="menu-toggle" class="toggle" aria-label="Toggle menu" />
  <label for="menu-toggle" class="burger" aria-hidden="true"><i></i><i></i><i></i></label>
  <nav class="links">
    <a href="#" class="active">Home</a>
    <a href="#">Work</a>
    <a href="#">Notes</a>
    <a href="#">About</a>
    <a href="#" class="btn">Hire me</a>
  </nav>
</header>
<main class="demo">
  <h1>Responsive Navbar</h1>
  <p>Resize the preview to see the mobile menu.</p>
</main>

The AI prompt

Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.

Build a responsive sticky navigation bar in plain HTML and CSS, with a mobile menu that works without JavaScript.

Desktop:
- A header with the logo "Ravindra" on the left (first letter orange) and links on the right: Home (active), Work, Notes, About, plus a navy pill button "Hire me".
- position: sticky at the top, semi-transparent white background with backdrop-filter blur, 1px bottom border.
- Links are dark grey, turning indigo #2506ad on hover or when active.

Mobile (below 720px):
- Hide the links and show a three-line hamburger icon.
- Use the "checkbox hack": a visually hidden <input type="checkbox">, a <label> styled as the hamburger, and the sibling selector .toggle:checked ~ .links to show the menu as a full-width dropdown under the bar.
- Animate the hamburger into an "x" when checked (rotate the top and bottom bars, fade the middle one).

Also include a simple placeholder <main> below the header so the sticky behaviour is visible.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Lay out the header with flex and space-between: logo on one side, links on the other.

2. 2

   Make it sticky with position: sticky and top: 0; a translucent background with backdrop-filter gives the frosted look.

3. 3

   Add a hidden checkbox before the links and a label (the hamburger) that toggles it.

4. 4

   On mobile, hide the links by default and show them when the checkbox is checked, using the general sibling selector (~).

5. 5

   Animate the three hamburger bars into a cross using transforms on nth-child.

Customisation tips

• In a React or Next.js app, replace the checkbox with useState for better control and to close the menu after navigation.
• Add aria-current='page' to the active link for assistive technology.
• Keep the number of top-level links to about five; move the rest into the footer.

More sections