title: Change background color when specific class is active
body: <p>I'm making a wordpress website, and the header menu has a background color when the page loads, but when I scroll it changes the header to sticky and changes the background color. The problem is that the dropdown menu doesn't change color and stays the same as the initial header.</p>
  
  <p>What I wanted to do is when the header contains (stick) class to transform the background color of the dropdown menu.</p>
  
  <p>Initial menu:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header class=" scroll_header_top_area dark stick scrolled_not_transparent page_header"&gt;
  </code></pre>
  
  <p>when it transforms:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;header class="scroll_header_top_area dark stick scrolled_not_transparent page_header sticky sticky_animate"&gt;
  </code></pre>
  
  <p>So is it possible to add javascript or jquery to order the dropdown menu to change the background color when the header has (.sticky) class?</p>
  
  <p>Thanks.</p>
  
  <p>Edit:
  <a href="https://prnt.sc/o4xf4e" rel="nofollow noreferrer">https://prnt.sc/o4xf4e</a>
  <a href="https://prnt.sc/o4xf4e" rel="nofollow noreferrer">https://prnt.sc/o4xf4e</a></p>
  
  <p>These are screenshots for better comprehension of the problem, sorry for not expressing in the best way.</p>
  
  <p>I had this css to change only the dropdown:</p>
  
  <pre class="lang-css prettyprint-override"><code>.drop_down .second .inner ul, .drop_down .second .inner ul li ul, .shopping_cart_dropdown, li.narrow .second .inner ul, .header_top .right #lang_sel ul ul, .drop_down .wide .second ul li.show_widget_area_in_popup .widget, .drop_down .wide.wide_background .second{
      background-color: #ffffff!important;
  }
  </code></pre>
  
  <p>I added .scroll_header_top_area.sticky behind but nothing happened. Doing what you told me to do will only change the menu background and not the dropdown.</p>