make button a different color on scroll

Hey bobfurgo,
Please look in your custom css for your button’s color, it has the !important; on it so it’s hard to overwrite.
Try to comment out only the color and background, like this:

#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    /*color: #0077ff !important;*/
   /* background: white !important;*/
     border-color: white !important;
     margin-left: -15px !important;
}

Then try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_button_color_scroll(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {    
      var scroll = $(window).scrollTop();
      if (scroll >= 80) {
          $(".responsive #top #wrap_all #header.header_color .menu-item-109.av-menu-button-colored a span.avia-menu-text").css({ 'background': '#0077ff', 'color': '#fff'});
          $("#top #wrap_all #header.header_color #menu-item-109.av-menu-button-colored a span.avia-menu-text").css({ 'background': '#0077ff', 'color': '#fff'});
      } else {
          $(".responsive #top #wrap_all #header.header_color .menu-item-109.av-menu-button-colored a span.avia-menu-text").css({ 'background': '#0077ff', 'color': '#fff'});
          $("#top #wrap_all #header.header_color #menu-item-109.av-menu-button-colored a span.avia-menu-text").css({ 'background': '#fff', 'color': '#0077ff'});
      }
  });
  })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_button_color_scroll');

Then clear your browser cache. If this doesn’t work then please include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thanks for the feedback, I tried checking your site, but the login didn’t work on the domain login, please check.

Best regards,
Mike

Hi,
Thanks, that login allowed me to get to the WordPress login but the WP password didn’t work, please check.

Best regards,
Mike

Hi,
Thanks for the login, I committed out the css and added the function in your child theme functions.php
It seems to be working now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Odd, this seemed to be working before, but now when I disable your css merging in Enfold Theme Options > Performance > JS & CSS file merging and compression your css merging is still showing.
I have now removed the script I posted and commented out the css to have a clean start and try again but I’m still seeing the merged css file, Your server is well known for it’s cache, but typically the test domains from your server (such as yours) are not cached.
So, I’m going to wait a few hours to see if this clears up, and try again.
Please reply to this so it will show up for me again and I can work on this some more. (we only see open topics), I hope this makes sense to you :)
Anyways, I’m sure we can sort this out, right now it looks like a cache issue. Please ask your webhost if they are caching, and if they are, please ask to clear it, otherwise, I’ll try again later.
Thank you for your patience.

Best regards,
Mike

Hi,
Thank you for your patience, I have added this css to your Quick CSS and now the button is working correctly:

#top #wrap_all .header_color.header-scrolled #menu-item-109.av-menu-button-colored > a .avia-menu-text {
    background-color: #0077ff !important; 
    color: #ffffff !important; 
}
#top #wrap_all .header_color #menu-item-109.av-menu-button-colored > a .avia-menu-text {
    background-color: #ffffff !important; 
    color: #0077ff !important; 
}

Please clear your browser cache and check.

Best regards,
Mike