0

Test site: https://josh-unger-mzr3.squarespace.com

I would like added "x" in the mobile menu (800px or less) to close the menu.

I'd like the "menu" button to reopen the menu after "x" has been clicked with no conflicts.

My code:

$(document).ready(function() {
  $('#block-yui_3_17_2_8_1513711317921_6208').appendTo('.wrapper ');
});

$(document).ready(function() {
  $("#block-yui_3_17_2_8_1513711317921_6208").click(function() {
    $("#mobileNav").toggleClass("menu-open")
  })
})
junger
  • 55
  • 1
  • 9
  • 1
    after `appendTo`you'll need [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) `$(document).on('click' , "#block-yui_3_17_2_8_1513711317921_6208" , function(){` – Mohamed-Yousef Dec 19 '17 at 21:34
  • can you provide an example of how I can combine your code with what I have? – junger Dec 19 '17 at 21:58
  • @Obsidian Age This works: – junger Dec 19 '17 at 22:49
  • @junger -- Please don't update your question to include the answer. Instead, write it as an independent answer. You can even accept an answer you write yourself, which marks the question as resolved, awarding you reputation in the process! – Obsidian Age Dec 19 '17 at 22:59
  • thank you for the suggestion. I appreciate it! – junger Dec 20 '17 at 22:30

1 Answers1

0

Here is the solution that worked. 

<script> $(document).ready(function(){ $("#block-
 yui_3_17_2_8_1513711317921_6208").click(function()‌​{ 
 $("#mobileNav").removeClass("menu-open"); }); }); </script>


 <script> $(document).ready(function(){ $("#block-
  yui_3_17_2_8_1513711317921_6208").click(function()‌​{ 
   $("#mobileNav").height(0); }); }); </script>
junger
  • 55
  • 1
  • 9