Problem description

Given an HTML structure for a <nav> element containing a logo and a list of links, write CSS so that:

• The nav bar is fixed to the top of the viewport and spans the full width.

• It has a translucent background (e.g., 20% opacity white) and applies a backdrop-filter: blur(8px) to content behind it.

• Items inside the nav are laid out horizontally and centered vertically.

Goal

Write CSS rules to style the <nav> using glassmorphic effects and flexbox for layout, ensuring the bar remains fixed at the top and responsive across screen sizes.

Constraints

• Use only CSS (no JavaScript).

• Navbar height fixed at 60px.

• Use backdrop-filter: blur(8px) for the glass effect.

• The nav background uses rgba(255,255,255,0.2).

• Content behind the nav should be visible and blurred.

• Links are evenly spaced using flexbox.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.