Wordpress toggle menu is not functioning - wordpress

Question

Currently working on http://getfitquick.co.uk/ but have come into an issue, when the menu is viewed on Tablets/Mobile the menu is currently active with the toggle constantly on, would really like to remove this so that the user is able to click menu and allow the menu to appear as opposed to it always being active.
Would also like to mention for reference that on http://getfitquick.co.uk/shop/ the menu is actually appearing how I want it to, however I am a bit unsure how I did this,
Is there anything anyone could suggest? Maybe something I may have done wrong within the process?
Thanks for reading,

Answer 1

On the homepage there's a css code that runs display: inline-block !important; for .menu .nav
#media (max-width: 768px) (index):251
.menu .nav {
position: relative;
background-color: #000000;
left: 0px;
border-color: #e51d25;
display: inline-block !important;
}
that code will override the default behavior of the mobile nav
at the top of that code, there's a comment that says
/*
The following CSS generated by Yellow Pencil Plugin.
http://waspthemes.com/yellow-pencil
*/
So I'm not quit sure if that CSS is directly generated from that plugin option on the homepage or if its from a custom CSS code assign to that homepage,
the best way to fix that is to look for that code, its should be somewhere in the Yellow Pencil Plugin
The second option though is really a bad idea is to modify and override it
CSS Override
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
then add active when the button is click and remove it when click again,
jQuery
(function( $) {
$('header').on('click', '.menu .toggleMenu', function() {
$(this).parent().toggleClass('active');
});
})(jQuery);