HTML to wordpress scripting issue or some CSS conflict issue

[codeispoetry]

I am converting this HTML template gradually into a WordPress template.

1. HTML Template
2. WordPress Template.

But I dont know whats wrong with the Hamburger menu is not animating on the click. I believe that the animation is not governed by JS, the only thing that JS govern is that on clicking the hamburger it should be producing the drop down. whats wrong I couldn’t understand even after wasting many hours.

[c3williams]

the html version has a custom.js which controls the menus slide up/down on click

$(".nav-icon1").click(function() {
  $(".nav-icon1").toggleClass("clicked");
    if ( $( ".mobile-menu" ).is( ":hidden" ) ) {
      $( ".mobile-menu" ).slideDown( "fast" );
    } else {
      $( ".mobile-menu" ).slideUp("fast");
    }
});

Theres also a little more jq that adds an open class - cant see where this class is being further used though

[codeispoetry]

@c3williams

the html version has a custom.js which controls the menus slide up/down on click

Correct, but the animation should also work on the wordpress version because the style.css file is loading correctly.

[c3williams]

The animation works on the toggle class of open. Yes, the css is there for this, but the html has no open class attached, or nothing to trigger it. Add the jq and the menu should animate.

$(document).ready(function(){
	$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
		$(this).toggleClass('open');
	});

[codeispoetry]

@c3williams

Add the jq and the menu should animate.

I think you wanted to say that the JS is not available or not loading.

I am loading the JS through a Function →
https://www.screencast.com/t/2Wjm9okH27c

Can you please help me to understand if there is anything wrong in the way I am loading the java-script.

This is how I am registering constants in functions.php →

/*-------------------------------------------*/
/* 1. CONSTANTS */
/*-------------------------------------------*/
define( 'THEMEROOT', get_stylesheet_directory_uri() );
define( 'IMAGES', THEMEROOT . '/img' );
define( 'JS', THEMEROOT . '/js' );

[c3williams]

@Novicedeveloper

I think you wanted to say that the JS is not available or not loading.

…Add the jq & js and it should work!

I don’t know if your php is working, or not, but you want to be loading the library before the custom jq script. If it doesn’t work then, I would add the library and script to the html to test that it works from there. If it works from the html, then you know it’s the loading of the scripts that’s failing and that’s a thread for the php forums.

[codeispoetry]

@c3williams

I don’t know if your php is working, or not, but you want to be loading the library before the custom jq script. If it doesn’t work then, I would add the library and script to the html to test that it works from there. If it works from the html, then you know it’s the loading of the scripts that’s failing and that’s a thread for the php forums.

I have added JQ and JS, still it didntn worked →
https://www.screencast.com/t/DkrpxzCrzUob

[c3williams]

getting a 404 on the loading of custom.js
http://codepen.trafficopedia.com/site01/js/custom.js

[codeispoetry]

[quote=“c3williams, post:8, topic:259193”]ss is the l
getting a 404 on the loading of custom.js
[/quote]

sir, this is wordpress is the location of custom.jscorrect?

Please see the script is available here →
http://codepen.trafficopedia.com/site01/wp-content/themes/simplisto/js/custom.js

[c3williams]

The above is ok, yes. That is not the link you have in the head…see image

[codeispoetry]

I am unable to find the flaw. I dont know whats the mistake →

	// Register the script like this for a theme:
		wp_register_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
		wp_enqueue_script( 'custom-js' );                                  

why custom.js is not loading?

Are we doing any mistake in using these →

1. wp_enqueue_script
2. wp_register_script

[c3williams]

Seems to be loading fine now. Theres either a conflict with another library, or custom.js is loading before the library. Try changing custom.js to the following

$.noConflict();
jQuery( document ).ready(function( $ ) {

$(".nav-icon1").click(function() {
  $(".nav-icon1").toggleClass("clicked");
    if ( $( ".mobile-menu" ).is( ":hidden" ) ) {
      $( ".mobile-menu" ).slideDown( "fast" );
    } else {
      $( ".mobile-menu" ).slideUp("fast");
    }
});

$('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
 $(this).toggleClass('open');
});


});