Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We have now created a header that's responsive in that it resizes and realigns as we reduce the width of our window. However, if we make the window small enough, it starts looking really strange. That's because we've yet to add media queries to make sure that as we hit certain points in our layout, the menu will also respond to that point and change so that the layout is more useful. What we want to do here is create a situation where when the width of the window is small enough, the menu ceases to stay on the right, and instead moves in underneath the title.
That will make it more accessible, and we'll avoid this squishing effect that you see here. To do that, we need to add media queries. So let's figure out what we want to do first. In the previous movie, we used percentages to move the entire header container to the right and then shift the title and tagline to the left. So logic dictates that if we reset these values, we will end up with a situation where the title and tag line is on the top and the menu's on the bottom.
If you look at our style sheet, you'll see that here we have the header-container and the header-title styled inside the main style sheet. So if we simply copy these elements out and go all the way down to our media queries, we can add these styles in to the media query we want to. In this case we want the breakpoint to happen at 719 pixels. If you remember, that's the second breakpoint where the layout goes from being fixed, like this, to fluid, like this.
To reset the menu layout, I'm going to go in here to my media query and find a logical place to place it, so I'll place these styles directly after header_margin. I'll paste in the original styles first and just do some cleanup so that it looks nice. And then what I want to do is reset these values to default, or just 0. So I'll reset margin-left to 0 and this margin to 0 and I'll say float: none, and reset the width to 100%.
I'll save this and when I reload my page now, you'll see that the menu is underneath the title and tag line, and if I scale the window up, the menu appears on the right-hand side. So a simple media query was all that was needed to reset the layout back to what it was originally, which is what we wanted.
Get unlimited access to all courses for just $25/month.Become a member