I'm currently working on customizing my WordPress site, which uses the Enfold theme. I have implemented a burger menu for all screen widths, and now I want to change the color of the contact information (phone and email) when the burger menu is opened. However, I'm unsure whether to trigger this function when the burger menu is clicked or only when the overlay is visible.
To illustrate my issue, I have included some images below:
To start, I linked my .js file via the functions.php file and confirmed that it was successfully integrated into my website by testing a simple alert, which worked as expected.
Next, I attempted to add the following code:
$(document).ready(function($) {
$('.av-hamburger').on ({
'click' : function(){
$('.navcontact').css({ 'color': 'red'});
}
});
});
Despite trying this code, nothing changed on my site. I even tried replacing the color change with an alert, but still no action occurred.
It's been a while since I've worked with JavaScript and jQuery – about three years to be exact – so perhaps I am overlooking something critical. Any help or guidance would be greatly appreciated. Thanks!