Media queries are great for slowly degrading elements as the screen resizes. Sass makes this even easier, letting you pepper in those media queries right in the middle of your code. Here's an example of an instance that this would be extremely useful.
We're going to build a responsive vertical menu that holds a lot of information, and as we are provided smaller amounts of space, we'll make sure that it gracefully minimizes itself. There is a sample at the bottom of the page if you'd like to see what we're creating before you get started.
Set Up The Basic Navigation
We'll get started with a basic navigation structure...
...and then give it some basic styles and a nice hover transition to make it a little more aesthetically pleasing.
We now have a decent looking navigation, so let's add some more elements. I want to add some decorative arrows before each of the links, so we'll use the
:before pseudo element to take care of that using only CSS.
Nest this inside your li so we don't have to worry about interfering with the links. This is why the
padding-left:20px; was added to the
The arrow comes from the thick corner of the border that we styled. Since there isn't any actual content, the border sits alone.
Now we'll add some descriptions for each of our menu links to let the users know where each of them is going. We're going to break these descriptions twice, hence the two seperate spans. The
.long span will be taken out quickly as it takes up a lot of space, then the rest will be taken out later. Spans are nothing more than inline divs, so don't worry about nesting them.
Now we have our full navigation that we're content with on the largest screens.
Now we have our full navigation, but as soon as the window starts to get smaller, it begins to break. To fix this, we'll use the "shrink it til it breaks method" of using break points that work with the content that we're using, instead of choosing break points based on targeting specific device resolutions.
Our first break point will be around
800px, so we'll start there. The menu is taking up too much of the screen, so we'll add our first media query to the
nav and make the width smaller.
Unfortunately, this shrinking of the
nav will cause the text to flow to the next line, making our navigation look bloated. We prepared for this with our multiple
<span>, so we'll hide the
.long class to take away the extra text.
When the screen dips below this size, now our navigation will still look concise and together.
The next break point we'll hit is
600px. The navigation is again getting too wide for our screen, so let's shrink it and then fix what breaks. Start with adding another media query to the
Now you'll notice that none of our description fits well next to the links, so let's remove them by adding a media query to
Our descriptions are now removed at this lower resolution, and the menu again looks as you would expect it to.
Our navigation is now almost completely broken down, but at mobile-size resolutions we may still have issues. We'll take away the arrows and shorten it up so it can fit even on tiny screens. As before, we'll start with the
Now we'll take away the arrows and get rid of the
border-radius so we can have our menu as tightened up as possible. Under your
li selector, add a media query a little above 400px. We'll make it save space by lowering the padding, and take the border-radius away so it looks better being so small.
Getting rid of the arrows involves adding a media query that takes away the border that creates them. This is located in the
:before pseudo selector, so put the media query there.
The navigation is now completely broken down at smaller screens. We can now be confident that no matter what the resolution our menu is displayed at, and no matter what device it's being viewed on, it will still look nice and function well.
The Whole Thing
Here's the entirety of the code, and a Codepen example that you can try out yourself. Keep in mind that very little of this is set in stone. You can make it look however you want and adjust the media queries according to your specific content, this is just what happened to work for mine.