title: How can I change the navbar's text color on scroll?
body: <p>In the Divi theme for WordPress, I've been trying to make the color of the font in the navbar (primary menu) change on scroll. I'm using a script &amp; CSS to make the background color of the navbar change on scroll, but I can't get the font to change. I've tried making the font-family change on scroll, and it works, but for some reason color just won't budge. The background color of the navbar correctly changes on scroll as well.</p>
  
  <p>In the Divi Theme Customizer, the color of the font is set to white. The CSS should override that on scroll, which it isn't doing.</p>
  
  <p>Here is the CSS: </p>
  
  <pre><code>.opaque-header { //on scroll
   color: black !important; //change color on scroll
   font-family: Impact; //test to see if font family has an impact
   background-color: rgba(255,255,255,0.8) !important;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
   -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
   }
  
  .transparent-header { //the header before scroll
   background-color: rgba(255, 255, 255, 0.0) !important; //transparent bg
   box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
   }
  </code></pre>
  
  <p>Here is the script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   (function($) {
  
  var cover_section = '#cover-section',
   top_header = '#top-header, #et-secondary-nav',
   header = '#main-header';
  
  $(window).bind('scroll', function() {
  
  if ($(window).scrollTop() &gt; 0) {
   $(header).addClass('opaque-header');
   $(header).removeClass('transparent-header');
   $(top_header).addClass('opaque-header');
   $(top_header).removeClass('transparent-header');
   } else {
   $(header).removeClass('opaque-header');
   $(header).addClass('transparent-header');
   $(top_header).removeClass('opaque-header');
   $(top_header).addClass('transparent-header');
   }
   });
  
  $(document).ready(function() {
   top_header = '#top-header, #et-secondary-nav';
   header = '#main-header';
   $(header).addClass('transparent-header');
   $(top_header).addClass('transparent-header');
   if ($(cover_section).length) $('body').addClass('cover-active');
   });
  
  $(window).load(function() {
   if ($(cover_section).length) set_viewport_height($(cover_section));
   });
  
  $(window).resize(function() {
   if ($(cover_section).length) set_viewport_height($(cover_section));
   });
  
  function set_viewport_height(element) {
   var viewport_height = $(window).height();
  
  if ($('#wpadminbar').length) var viewport_height = viewport_height - $('#wpadminbar').innerHeight();
  
  $(element).height(viewport_height);
   };
  
  })(jQuery);
   &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
   (function($) {
  
  $(window).load(function() {
   $('#divi-loading').fadeOut(500);
   });
  
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone help me out? Thanks</p>