Change the contact info color when my burger menu is open

Question

On my WordPress site (using Enfold as the theme) I'm using a burger menu for all widths. I want the contact information (phone and email) to change color when I open my burger menu. I don't really know if I should get a function to work when I click on my burger (my attempt) or if I should get a function to work only when my menu burger overlay is visible.

I added some photos so you can see what I'm talking about

I firstly linked my .js file through a functions.php file, and to be sure it was linked to my website i tried displaying a simple alert that worked.

After that i tried adding my code :

$(document).ready(function($) {
  $('.av-hamburger').on ({
    'click' : function(){
      $('.navcontact').css({ 'color': 'red'});
    }
  });
});

I tried this code but nothing happened, even if I try to replace my change of color by an alert.

I'm kinda rusty with js and jquery, I haven't used those languages since 3 years so maybe I'm missing some crucial parts... Thanks for the help

Answer 1

You are using the wrong syntax for .on

$(document).ready(function($) {
  $('.av-hamburger').on('click',function(){
      $('.navcontact').css({ 'color': 'red'});
  });
});

should work as expected

See jquery documentation for reference