Making Websites Work on All Screen Sizes (Responsiveness)
Create a "hamburger" menu icon that opens a navigation list on mobile.
Skill ID: Responsiveness_45
Description: Replace full nav with an icon on mobile.
Where to apply: Main website navigation for mobile.
Key Tailwind Classes:
md:hidden
(for hamburger)
,
hidden
md:flex
(for full nav)
Gotcha: Tailwind only handles the styling and the showing/hiding with classes. The actual functionality of clicking the hamburger icon to toggle the visibility of the menu requires JavaScript. Beginners often expect Tailwind to handle the click event too.
Illustrative Example:
Below is a common structure. You would need JavaScript to toggle the 'hidden' class on the mobile menu.
Note: The example above uses placeholder `id` attributes for potential JavaScript interaction. The classes
md:hidden
on the hamburger button ensure it's hidden on medium screens and up. The classes
hidden md:flex
on the full navigation ensure it's hidden by default on small screens and displayed as a flex container on medium screens and up. The mobile menu itself is
hidden md:hidden
, meaning it's hidden always unless JavaScript removes the 'hidden' class, and it will re-hide on medium screens anyway.