Problem description

Given an HTML page with two navigation sections:

• <nav class="mobile-nav"> contains a vertical list of links for mobile.

• <nav class="desktop-nav"> contains a horizontal list of links for desktop.

Write CSS to meet the following requirements:

• The .mobile-nav should be visible when the viewport width is less than 768px and hidden otherwise.

• The .desktop-nav should be hidden when the viewport width is less than 768px and visible otherwise.

• Do not modify the HTML structure or use JavaScript.

Goal

Ensure users on mobile devices see a vertical, mobile-friendly navigation, while desktop users see a horizontal desktop navigation, improving usability across devices.

Constraints

• Only use CSS; JavaScript and HTML changes are not allowed.

• The breakpoint for switching visibility is exactly 768px.

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.