The navigation menu in the header of a website often changes depending on the screen size. In this exercise, you will use media queries and flexbox together to make the header look great on any device.
Follow the steps below to complete this exercise. Do not modify the index.html file.
- The navigation menu items are "Men's Fashion", "Women's Fashion" and "On Sale". Right now they appear stacked on top of each other. Write a media query and use flexbox rules to put the items side by side on screens wider than
480px. - Write a media query and use flexbox so that the logo, navigation menu and checkout button appear side by side on screens wider than
700px. - Write a media query and use flexbox so that the checkout button appears on the right and the navigation menu appears in the center on screens wider than
992px.
When you complete this exercise, you should be able to change the screen size and see the header change like the image below.
.