However, I wanted to push the boundaries of known space, and I wondered if it were even possible to design a simple nav bar which was purely responsive and only required CSS (assuming the HTML was already in place).
But I didn’t want it to be just “another” nav bar wrapped in 100 different
@media queries everywhere. I wanted:
- Something that grew with the changing of the screen size automatically;
- Something that required the user to push a button/link to open the nav bar menu – and then conversely another (or the same button) to collapse that same menu;
- And something that didn’t obscure the content of the page – I wanted it to push itself into the page thereby moving all content underneath it further down the page.
- Could such a thing be possible with pure CSS?
Sure. Why not?
Did you also want fries with your new nav bar too??
Well, surprisingly (at least to me) such a thing was possible. And in the end after surfing the web and trying to harness the power of CSS with good structured HTML I was able to find such a solution. In fact, I was so impressed with it that I decided to permanently leave it on this current site – you would need to apply those @media queries to your CSS file if you only wanted it to apply within a certain screen size.
Anyway, here it is:
HTML5 raw body code:
And as one file (CSS inline):
If you want to see it in action – see this jsFiddle here.
The only disadvantage I can see with this type of responsive structure is that it will append the
id tags to the URI:
#hideMenu – you can rename these id tags as you see fit, but do be mindful they will be added when clicked.
In Microsoft Word you can control whether or not you want to see the white space characters in your document. This helps to check you haven't incorrectly inserted a tab where a space should have gone...
Very similar to our previous article on how to make a header row in Google Sheets, in this article we'll show how you can lock a column in Google Sheets. To lock a column in Google Sheets easily...