Every since responsive design came about, hamburger menus have been a staple for mobile navigations. I used to use a graphic for my hamburger menus. Then when I started using Bootstrap I switched to a glyphicon. 

Recently I stumbled upon a CSS/JavaScript version that I really enjoy using. It provides a little animation and is easily customizable. 

Check out the CodePen for code

See the Pen Hamburger Menu in CSS and JavaScript by Jonathan Volks (@adkvolks) on CodePen.0

The CSS controls 95% of what is going on. It creates a span that has a 3px height for the middle line. Then a before and after that creates the top and bottom lines. 

The JavaScript only toggles a class being added to the HTML. The CSS transition takes care of the hamburger menu turning into an X. 


Blog Author Jonathan Volks

About Jonathan Volks

Jon has over 10 years of both front-end and back-end web programming and development. Currently he is a Senior Web Programmer at Skidmore College maintaing the marketing website. In his free time he enjoys hiking in the Adirondacks, hockey games with the Adirondack Thunder, and creating outragious fan theories about Westworld. Calling it right now, Stubbs is a host with Teddy's memories.

By default, Google Analytics is unable to track PDF documents. This is due to PDF’s not being able to run JavaScript code when viewed in a browser (or downloaded).  So to get around this, we can add a little bit of code to the website in order for PDFs to show up in Google Analytics.

What you’ll need:

  • Access to your JavaScript file.
  • Familiarity with JavaScript and adding code to it.
  • jQuery

In your JavaScript code, add the following:

So what’s going on here? Essentially this code loops through all the <a> tags that contain “pdf”. Then adds a Google Custom Event code to that link tag. When a user clicks on the link, an event push is sent to Google Analytics to track.


Blog Author Jonathan Volks

About Jonathan Volks

Jon has over 10 years of both front-end and back-end web programming and development. Currently he is a Senior Web Programmer at Skidmore College maintaing the marketing website. In his free time he enjoys hiking in the Adirondacks, hockey games with the Adirondack Thunder, and creating outragious fan theories about Westworld. Calling it right now, Stubbs is a host with Teddy's memories.