Flexbox: a real menu

Learn to line boxes up side by side, and your menu will look like it's from a real website.

Show me: boxes side by side

The links in your menu currently sit on the page one after another, kind of like words in a sentence. A real menu has its items lined up neatly, side by side, with spacing. CSS has a tool for lining up boxes called flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

That’s it. display: flex tells the box: “Line up your children (the links, here) in a row.” And gap sets the space between them. Flexbox can do a lot more:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Let’s combine everything you already know with flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Something new at the end: :hover means “when you hover over it with the mouse”. The menu item lights up on hover – exactly like on websites you know.

Your turn 💪

Turn your menu into a real menu: a colored bar across the full width of the header, items side by side like pills, lighting up on hover. Take colors from your palette from lesson 6.

🏫 School website – solution (blue)

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

🙋 Personal website – solution (orange)

Same code, just swap the header color:

header {
  background-color: #ea580c;
  padding: 16px;
}

🌍 Travel journal – solution (green)

Same code, just swap the header color:

header {
  background-color: #15803d;
  padding: 16px;
}

⚽ Club website – solution (club color)

Same code, just swap the header color for your club’s:

header {
  background-color: #b91c1c;
  padding: 16px;
}

💡

Want the name on the left and the menu on the right, on one line? Wrap the header in another flexbox: add header { display: flex; justify-content: space-between; align-items: center; }. The space-between property means “push the children apart: the first one to the left, the last one to the right”.

✅

Check yourself: There’s a colored bar at the top of your website, with a white name and pill-shaped menu items that light up when you hover over them. Remember – since CSS is shared, the menu changed on every page at once.

What to take away from this lesson

display: flex lines up a box’s children in a row, gap puts space between them.
justify-content and align-items align things, flex-wrap: wrap lets them wrap.
:hover = “when the mouse hovers over it”. A little glow-up makes a website feel alive.

Show me: boxes side by side

Show me: a menu like a real website has

Your turn 💪

What to take away from this lesson