Create a site menu

Level
Intermediate
Topics
Navigation

A responsive mobile menu is horizontal on desktops, but collapses to a hidden vertical menu on mobile, with a toggle button to display it.

Responsive menus can be tricky to implement, as you have to consider responsive design, accessibility, and UX.

Instructions

  1. Find an example of a mobile menu you want to implement.
  2. Create the html for your menu.
  3. Style it to be horizontal on desktop, and vertical on mobile.
  4. Position the menu where you want it to display.
  5. Create a toggle button that opens and closes the menu.
  6. Adjust styles to look good on desktop and mobile.