if i run my custom design in html or php using xampp server this function works well but if i add it on wordpress theme this doesn't work and show's no error in console did i missed something here i'm not a common wordpress user just for this project please help.
main.js
$('#menu').on('click', function(){
$('.side-nav').fadeToggle('800','linear');
$('body').css('height', wh());
$('html,body').addClass('overflow-hidden');
$(window).one('resize orientationchange', function(){
wh();
});
});
$('#close-nav').on('click', function(){
console.log('test');
$('.side-nav').fadeToggle('fast','linear');
$('body').removeAttr('style');
$('html,body').removeClass('overflow-hidden');
});
functions.php
function css_script_enqueue()
{
wp_enqueue_style('main', get_template_directory_uri() . '/css/main.css', array(), '1.0.0', 'all');
wp_enqueue_script('main1', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('main-min1', get_template_directory_uri() . '/js/main-min.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'css_script_enqueue');
sidebar.php
<div class="side-nav">
<div class="close-wrap">
<i id="close-nav" class="fas fa-times"></i>
</div>
<ul class="nav-a">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="blog.php">Blog</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
<ul class="nav-b">
<li><a href="donateNOW.php">Donate now</a></li>
<li><a href="joinNOW.php">Join us now</a></li>
</ul>
</div>
header.php
<title>The house of Joy - Orphanage</title>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
