Rookie JQuery problem with responsive template
Ok I hope I can properly describe the problem. I have a responsive template and when the window width shrinks, the menu disappears and an icon appears in its place. When you click the icon the menu is displayed using JQuery. Everything works fine up to that point. However, once you click the icon it creates inline CSS to show & hide the menu depending on how many times you click it. So if you click twice then expand the window again, the menu remains hidden because of the inline CSS. What would be the best way to go about correcting this code?
jQuery(document).ready(function($){
$('#header').prepend('<div id="menu-icon"> </div>');
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
Thank you!