How to get a Fixed mobile menu in Divi to change colour on scroll with CSS and possibly jQuery?

I have already made a start and have a working fixed mobile menu with a 0.4sec ease transition decreasing the height on scroll also.

So far all done with CSS.

I tried adding a background-color transition at the bottom of the code but that bit refuses to work for me.

Currently the transition is attempting to modify .et_mobile_menu however I’ve tried making that #mobile_menu and #et-top-navigation - all no effect.

I’ve been at this for a couple of days now to no avail. Any light on how this could be done would be great, have scoured the forums already quite thoroughly.

Live Site: Intech Tools

CSS:

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
    /* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width: 980px){
  .et_header_style_left .et_fixed_header .et_mobile_menu {
     background-color: #f9c13a !important;
   }
      /* transition menu colour */
  .et_header_style_left .et_mobile_menu {
        -webkit-transition: background-color 0.4s ease;
        -o-transition: background-color 0.4s ease;
        transition: background-color 0.4s ease;
  }
}

Solved by CSS Ninja: Dwayne de Clercq
on Facebook group: Wordpress Developer & Web Designer.

The magic CSS was:

@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}

Making the final complete working code for a shrinking and colour changing fixed mobile menu:

CSS

 /** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened
.mobile_menu_bar:before {
color: #010a32 !important; content: "\4d";
}
/* hamburger text */
span.mobile_menu_bar:before {
color: #010a32 !important; content: "\61";
}

@media all and (max-width: 980px){

  /* FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */
  /* make header fixed */
  .et_header_style_left.et_fixed_nav #main-header {
    position: fixed;
  }
  /* decrease top navigation padding-top */
  .et_header_style_left .et-fixed-header #et-top-navigation {
    padding-top: 5px;
  }
  /* transition top navigation padding-top */
  .et_header_style_left #et-top-navigation {
        -webkit-transition: padding-top 0.4s ease;
        -o-transition: padding-top 0.4s ease;
        transition: padding-top 0.4s ease;
  }
  /* decrease menu hamburger padding-bottom */
 .et_header_style_left .et-fixed-header .mobile_menu_bar {
    padding-bottom: 5px;
  }
  /* transition menu hamburger padding-bottom */
  .et_header_style_left .mobile_menu_bar {
        -webkit-transition: padding-bottom 0.4s ease;
        -o-transition: padding-bottom 0.4s ease;
        transition: padding-bottom 0.4s ease;
  }
}  
/* END: FIXED HEADER WITH DECREASING HEIGHT ON SCROLL */

/* Colour Transition Mobile Menu Scroll */
@media all and (max-width:980px) {
.et-fixed-header#main-header,.et-fixed-header#main-header .et_mobile_menu {
  background-color:#f9c13a!important;
  -webkit-transition:background-color 0.4s ease;
  -o-transition:background-color 0.4s ease;
  transition:background-color 0.4s ease
 }
}