Mastering CSS

Styling the mobile nav in its open state

At the very bottom of the style sheet, I'm going to add in a new media query targeting 900px or less:

@media screen and (max-width: 1023px){  ...}/* end of media query */@media screen and (max-width: 900px) {}

Notice I also add a comment at the closing curly brace of the first media query. This is useful so we don't lose track of where our first media query ends. The new mobile nav will only be triggered at a new break point, 900px wide. That's when it starts to look funky and starts breaking. Firstly, I don't want the nav to be fixed to the top anymore, so let's get rid of fixed positioning and replace it with the default static position:

@media screen and (max-width: 900px) {  nav { position: static; ...