When our layout-core.css
file snaps the #container
div in on smaller screens to 950 pixels, we'll want #mainNav
to match that as well:
@media (max-width: 1024px) { /*for netbook/tablet screens*/ #mainNav{ position:absolute; top: 110px; width: 950px;} }
Our #mainNav
will now snap in to the width of our #container
div if the media query for 1024px
or less is called. Let's see how it looks on the relevant size screen: