Responsive nav bar

CSS
Medium

Objective

Build a responsive navigation bar that includes a logo on the left and menu items to the right.

The navigation bar should always stay on the top of the page, even when the user scrolls down. When viewed on mobile, the menu items should collapse into a hamburger menu.

Requirements

  1. Include a logo on the left side of the navigation bar

    1. You can use this logo: https://placehold.co/300x150

  2. There should be menu items on the right-hand side

    1. They should be: Home, Pricing, About, Contact

  3. The navigation bar should remain fixed to the top of the page and remain there when the user scrolls down

  4. If the viewport is less than 720px, the menu items should collapse into a hamburger menu

    1. When the hamburger menu is clicked, the menu items should appear in a vertical list

  5. You should use only HTML & CSS for this task

    1. Do not use JavaScript

    2. Do not use any CSS frameworks like Bootstrap or TailwindCSS