Quick Tip: Use an Icon with Responsive-Nav.js an Icon Font
Responsive Nav is a really nifty (and light-weight) Javascript plugin that will allow you to easily create an off-canvas navigation menu that slides down from off the screen. Here’s a quick and easy way to use an icon instead of your run of the mill plain text.
In the examples for integrating Responsive Nav into your site, you’ll find several implementations of the clickable area used to reveal the menu (called the label) including the word, “Menu” and the common menu icon (commonly known as the ‘Hamburger’ icon). However, the latter requires some extra CSS and finagling to make it work. That’s not to say it’s hard, but it could be much easier with an icon font like Font Awesome.
Simply include the Font Awesome stylesheet on your site:
Then configure responsive-nav.js using the instructions here. Once you’re ready to call the script in your webpage (right before the </body> tag, as recommended), you can use this:
This will replace the default label (‘Menu’) with some markup to call the icon below, giving you a implementation with no hassle.
This is a more elegant JavaScript solution than what I’ve done in the past. My only suggestion would be to use Font Awesome’s “icon-reorder” class as it displays the more common 3-line menu icon.
Thanks! That is a great point; the 3-line menu is much more common.
As a small (unrelated) addendum to this article, just a quick tip that if you float your menu items, opening the menu won’t work since you the height it technically 0. You’ll have to add the
.groupclass or the.clearfixto fix it.Hi Joe,
First of all: Thanks a lot for this post, it helped me a lot!
I was wondering though if there is any way to make the Font Awesome “burger” more “tapable”. I find it very hard to open or close the reponsive nav on touch devices as you have to hit exactly one of the bars (not white space inbetween) for the nav to open/close.
Tobi
Tobi,
Glad you liked it! I have noticed that too. I’d recommend playing with the font-size or padding to make it work a bit better.
Joe