Element unclickable because of overlapping div

Question

I have a transparent background on a fafa menu that animates from the left of the age on click. Because the background is transparent I needed to use fadeTo in my jquery to hide the fa fa-bars when it was clicked so that it didn't show up behind the fa fa-remove when the menu was extended out. Now the fa fa-remove is unclickable though and I can't find anything that fixes it.

Fiddle Here

var main = function() {

  $('.menu-icon').click(function() {
    $('.menu').animate({
      left: "0px"
    }, 200);

    $('#jumbotron').animate({
      left: "300px"
    }, 200);

    $('.menu-icon').fadeTo(
      "fast", 0);

  });

  /* Then push them back */
  $('.icon-close').click(function() {
    $('.menu').animate({
      left: "-300px"
    }, 200);

    $('#jumbotron').animate({
      left: "0px"
    }, 200);
  });
};


$(document).ready(main);

Answer 1

You're always clicking on the menu class. You must take the icon close element out of the nested menu div then animate both elements like you did with the menu element. The browser can't tell you're clicking the icon close, since it is nested inside the menu, which is why it won't fire. The browser can only see you repeatedly clicking the ".menu" element. Hope this helps. I fixed it jsfiddle. Just take the icon-close out of the menu div. (edit) you may want to z-index the icon close higher over the menu div for it to function.