Got it to work by simply binding the click and touchend event to the document. And then referencing the original hide/show function when the icon is clicked. HOWEVER, this introduced another problem of where clicking on the icon sometimes will double fire and you get weird behavior. Like closing and then reopening. I'm going to address this separately though. So, here's the answer:
The two functions touchHandler(event)
and init()
and the $(document).mousedown(function(e) { ... });
function and $("#hamburger-nav-link").click(function() { ... });
function are replaced with the following:
var navModalView = function() {
if ($("#navigation").hasClass("mobile-nav")) {
$("#hamburger-nav-link").removeClass("hamburger-nav-active");
$("#navigation").removeClass("mobile-nav");
}
else {
$("#hamburger-nav-link").addClass("hamburger-nav-active");
$("#navigation").addClass("mobile-nav");
}
return false;
}
$(document).bind("click touchend", function(e) {
var targetEl = $(e.target);
if (targetEl.is("#navigation") || targetEl.parents().is("#navigation")) {
return;
}
else if (targetEl.is("#hamburger-nav-link")) {
navModalView();
event.preventDefault();
}
else {
$("#hamburger-nav-link").removeClass("hamburger-nav-active");
$("#navigation").removeClass("mobile-nav");
}
});