Now let's hide the menu by default. Instead of using display: none, which, as I mentioned earlier, is not great for accessibility reasons, let's explore another technique that hides the content more creatively so screen readers can still find and announce it. We'll go back down inside of our media query, inside .primary-nav. We're going to say the height of this element is zero:
@media screen and (max-width: 900px) { .intro-content { margin-top: 50px; } nav { position: static; } .primary-nav { width: 100%; max-height: 0; overflow: hidden; -webkit-transition: all ease-out .35s; -moz-transition: all ease-out .35s; -o-transition: all ease-out .35s; transition: all ease-out .35s; }...
Following is the output of preceding code: ...
