Responsive Navigation Example

This example demonstrates the HTML structure for a common responsive navigation pattern:

On small screens, a hamburger icon is shown. The full navigation is hidden.
On medium screens and larger (md breakpoint, typically 768px), the hamburger icon is hidden, and the full navigation is shown.
The mobile menu (dropdown) is structured (`id="mobile-menu"`) but remains hidden.

Gotcha: JavaScript Required for Interaction

Tailwind CSS (`md:hidden`, `hidden`, `md:flex`) is used to control the visibility of elements based on screen size and their initial state. However, the actual toggling of the mobile menu when the hamburger icon is clicked requires JavaScript. The HTML structure here is prepared for such JS interaction (see comments in the code near `id="mobile-menu"`).

Try resizing your browser window. You will see the hamburger icon appear on small screens and the full navigation on larger screens. Clicking the hamburger icon will not do anything yet, as the JavaScript logic to toggle the mobile menu is not included in this static HTML example.