I have created a hamburger menu using Elementor's popup feature and dynamic feature to connect the popup with the hamburger so that it triggers the menu whenever I click on the hamburger button. However, for some reason, I can't handle clicks on the links inside it. I suppose something is blocking it, as I don't have any errors. My jQuery works well, and if I target another element on my page, like 'entry-title' for example, the click works. So I ask for your help if you know what to do, please. Here is my code:
Navigation.js
jQuery(document).ready(function($) {
console.log('Here it works');
// Navigation menu
jQuery('.onepage h4.elementor-heading-title.elementor-size-default > a').click(function(event) {
console.log("here doesn't work");
event.preventDefault();
var hash = this.hash;
if (window.location.pathname === '/') {
jQuery('html, body').animate({
scrollTop: jQuery(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
} else {
var targetUrl = window.location.origin + '/#' + this.hash.substr(1);
window.location.href = targetUrl;
return;
}
jQuery('.elementor-popup-modal').css('display', 'none');
});
});
I finally solved the problem with this code
I also solved it by creating tags directly with the insertion of a custom HTML tag, which allowed me to add the .onepage class directly to my tags and give them the desired behavior.