|

Quick Tip: Use an Icon with Responsive-Nav.js an Icon Font

Posted

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.

Screen Shot 2013-09-12 at 4.00.53 PM

Similar Posts

  • You Tube – Selective Attention Test

    Bycasabona

    Note: This article was published while I was in my early 20s. I was much younger and dumber. Please don’t hold it against me. One of the perils of having a 20+ year old website! This is a very interesting test! Let me know your results in the comments! (if you plan on doing the…

  • |

    Add Attachments to WordPress Search Results

    Bycasabona

    I feel like this has to have been done a lot, and there are great plugins out there for it, but if you’re just looking to add a quick function to your theme (or a really simple plugin) yourself, here’s how to modify WordPress’ search query to include attachments (like images). function attachment_search( $query ) {…

  • |

    Gloss WordPress Plugin

    Bycasabona

    Note: This article was published while I was in my early 20s. I was much younger and dumber. Please don’t hold it against me. One of the perils of having a 20+ year old website!Today, I officially released my first public WordPress plugin, Gloss. Gloss is a dictionary/glossary management plugin I decided to build which…

  • |

    Make wp-caption the same (responsive) width as the Image

    Bycasabona

    I was working on a problem last week in WordPress where the caption for an image was extending the whole width of the container, not staying the width of the image. This make sense – the image is inside the .wp-caption container. So how to we fix it? Let me tell you!

  • | |

    My Thoughts on Hulu Plus

    Bycasabona

    Note: This article was published while I was in my early 20s. I was much younger and dumber. Please don’t hold it against me. One of the perils of having a 20+ year old website! When it came out some time last year that Hulu was going to start charging for their service, people were…

4 Comments

  1. 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.

  2. 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 .group class or the .clearfix to fix it.

  3. 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

  4. 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

Comments are closed.