Let’s talk about this hamburger icon

TLDR: Keep Your Stuff Updated, and when you think you're up to date, but it still isn't working. You aren't up to date.

Long Version:

When designing and building this website I wanted to make sure it was totally responsive.

My previous portfolio site heavily relied on Parallax Scrolling, which while visually impressive but – Mobile No Like.

No, really, Mobile Browser hate really heavy parallax and will, depending on your implementation; completely disable it.

Now like all things in software there is a way around everything, but instead of trying to break everyone’s phone browsers, I just decided to make the mobile version of my previous website (Found here: www.helixdesign.us) to be parallax free.

While working on this website, I decided to utilize a shrunken header bar on mobile that would shrink my menu to a hamburger icon.

Or what should have been a simple hamburger icon.

I hated this hamburger icon and wanted to use Font Awesome's lovely, simply, 3 bars in a line so elegantly named: Bars

But no matter what I did, I could not replace this awful, awful icon.

I dug into the code, found all of the appropriate classes… updated their contents and…. nothing.

It would just error and display the unicode failover plain-text.

I did some googling into the plugins I was using, found that the plugin Absolutely Totally Completely supported other icons.

So I re-installed Font Awesome 5 Free, because hey, maybe my font library was corrupt – nope.

I found a post online of someone with this exact problem, and the css override they used to make it work, which i dutifully copied over… and nothing happened.

I dug into the dev tools some more, confirming that they should have been working. I had the font libraries, I had the CSS override, even breaking down and painting !important on everything wasn’t working… which meant something was preventing my font from being properly displayed.

I went and checked some other websites I’ve built utilizing this exact same implementation of this plugin…. and they work fine…

I started to get frustrated and wasn’t doing anything productive.

So I went to sleep.

Do not be afraid to walk away and come back fresh.

So I come back the next day… go through most of the same steps I did before… and realize that the plugin changelog I was reading, to confirm the support for Font Awesome 5 natively… was also announcing this as a “Great New Feature of Version 2.6.whatever” when it struck me…

I initialized this plugin on this website months and months ago… but just yesterday I had checked the big old ‘UPDATE ALL PLUGINS’ button…

You all know where this is going.

PLUGIN OUT OF DATE - VERSION 2.5.9 - CLICK TO UPDATE NOW

Updated…. went back into the editor and….

The override code that I had left in, from that lovely stranger on the internet who had previously solved this problem had kicked in, and all I had to do was go update the unicode for the icon I wanted to use.

Hi, I'm Ryan