With most of the unrelated HTML and code for my grid system stripped out, this is what the code for the navigation itself looks like:
This is what it looks like, first on big screens and then on mobile screens:
I stole the idea for using
<span>s for the navigation icon from Bootstrap. It’s pretty straightforward to style:
Not only does this code handle the toggling of the navigation for mobile browsers, it also watches the size of the window. If someone resizes their window down to the size needed to trigger the bar or back to full size, it will handle it gracefully.
Quick and easy.