Flex-grow and Flex-basis Exercise

Header navigation

Create a header navigation component. The component should consist of a title on the left and a menu on the right.

All margins are set to 20px on the container.

On screen widths below 768px, the menu on the right should be a hamburger menu. There is no need to implement any functionality, just make sure to display a square-shaped area representing the hamburger menu on the right.

At or above 768px, display three menu items:

• Home
• About
• Contact

The growth of the title container should be twice as large as the growth of the menu area. Inside the menu area, distribute the individual menu items evenly.

Implement your solution in the code editor below. The markup is given in the editor. Feel free to add classes to it.