Hi,
Oh, I’m sorry I missed that.
OK, I see it’s a mess :) To make the current menu item white and for the menu item to be white on hover,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top #sub_menu1 .av-subnav-menu > li.current_page_item {
background-color: #75253e !important;
border-bottom: 0px solid #75253e !important; 
padding: 0px !important;
}
#top #sub_menu1 .av-subnav-menu > li.current_page_item > a,#top #sub_menu1 .av-subnav-menu > li > a:hover {
color: #fff !important;
}

Best regards,
Mike

Hi,
Ok, so you have a white circle that is a “Information graphic” that you want to show on a slider?
How about adding a slide to the slider that shows for 1 second? If you use the LayerSlider you can do this and make the “Information graphic” a link, if you wish. I think it can also be triggered by touch or click.

Best regards,
Mike

Hi,
Sorry, I have never used the plugin, but it has very good reviews, have you tried asking the author what is needed for it to work?
I wish I could help you with it but we have quite a backlog here. Thanks for understanding.

Best regards,
Mike

Hi,
Thank you for the login, I removed 3 menu color elements in the advanced styling panel and now your animated sub-menus are working.
Please clear your browser cache and check.

Just in case you wanted to know what the colors were in the elements I removed, I’ll post here, but your css seems to be taking care of it:
#719430 bg
#377021 border
#fff menu bg
#000 font color

Best regards,
Mike

Hi,
Thank you for setting up the staging site, I was able to login. So I followed the steps in your video and at the point that the variable build broke this was the error you had:

meta-boxes-product-variation.min.js?ver=3.5.7:1 Uncaught TypeError: window.alert is not a function
    at Object.success (meta-boxes-product-variation.min.js?ver=3.5.7:1)
    at i (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.1.1:2)
    at Object.fireWith [as resolveWith] (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.1.1:2)
    at y (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.1.1:4)
    at XMLHttpRequest.c (load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=5.1.1:4)

I disabled all plugins, except woocommerce, and tried again. I again got the error that the plugin is trying to give a alert box.
Your site didn’t have a core theme installed so I tested this on my localhost by exporting your products and imported them, and then switched to a core theme, which worked because the “alert box” was given without a error:

I took a look at the test products that I created on your site when your page locked up, and found that the product variations were successfully created, so I conclude that the error is that when the alert box is given by woocommerce to say that the job is done, there is a javascript error that throws the error “window.alert is not a function”.

I have put these findings in a issue report for the dev team to test and recreate, and as soon as I hear back from them I will post here. Please leave the staging site up should they want to check anything.
Thank you for your patience.

Best regards,
Mike

Hi,
Thanks, I took another look and see that the html in the infusion form is rentering in the backend within the debugger, this has broken the elements in the builder. Please see the screenshot in Private Content area, you will see that in the debugger field the form is showing instead of the code.
I checked the code snippet you posted in the Private Content area for un-closed div’s and found none and I also checked it in a validator and it passed, but when I added it to my localhost it also broke my page on the backend. So the solution here is to create a “shortcode” from your form so it will only render on the front end.
While you can do this yourself if you have that experience, but I will recommend using a plugin for ease of use.
I tested: Insert Html Snippet , just add your html in the plugin field:

and then add the “shortecode” to a code block element:

[xyz-ihs snippet="infusion-form"]

and it will work on the frontend without braking your backend.
Please note that when you try to remove the code block that you have there now you will probably lose most of your page, that’s what happened to my test page, so just be ready to re-build your page.

Best regards,
Mike

Hey webworm72,
Sorry for the late reply, I took a look at your page, and it seems that you have found the solution to this because when I check your menu items:
accounting, information technology, operations, & procedurment
they are white when on the current item page.
Please let us know if there is anything else we can help with,
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Sorry for the late reply, glad to hear you found a solution. To remove the hover effect Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#av-tab-section-1 .av-tab-section-image {
    opacity: 1 !important; 
}

Best regards,
Mike

Hey stefan,
Please see our documentation for Masonry overlay animation 2 please scroll down a little on the page:

Here is an example:

.avia_desktop.avia_transform3d .av-caption-on-hover.av-caption-style- .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
    transition: bottom .2s ease-in !important; 
bottom: 0px !important; 
position: absolute !important; 
    min-height: 102px;
    transform-style: none !important; 
-webkit-transform-style: none !important; 
}
.main_color .avia-arrow {
    background-color: transparent !important; 
}
.main_color .site-background {
background-color: rgb(0, 0, 0) !important; 
}
h3.av-masonry-entry-title.entry-title {
color: #fff !important;
}
#top .av-inner-masonry-content {
    -webkit-transform: rotateX(0deg) !important; 
    transform: rotateX(0deg) !important; 
}

Best regards,
Mike

Hey tekniskakari,
Sorry for the late reply, when I look at your page it looks lined up, Please see the screenshot in Private Content area.
Is this how you are seeing it?

Best regards,
Mike

Hi,
Sorry for the late reply, unfortunately for small numbers changing the “3000” will not slow the count down, it is designed for larger numbers with more than two places.
This is what the last reply in this thread was trying to say:

Unfortunately, it’s not possible to control the speed of the requestAnimationFrame function which is responsible for the animation without creating a custom script. You might want to consult a freelance developer: http://kriesi.at/contact/customization

Also here: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation.

Best regards,
Mike

Hi,
Sorry for the late reply, I checked your site at 767px on Chrome and found a couple of rules competing.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 999px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {margin: 0;width: 100% !important; }
}

This sould resolve the issue.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
I have taken another look at your site and I believe the changing of the logo / site name color is the last thing your working on now.
I now realize that using the two different logos in the theme options is not going to work for you because you want to change the color a few times over certain elements, and not just once after scrolling just 100px.
So try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_logo_script(){
  ?>
  <script>
$(function() {
  var $header = $('.logo a > img'),
    $window = $(window),
    opacityArray = ["0", "1", "1", "0", "1"],
    headerHeight = 180,
    sectionHeight = 750;

  var $headera = $('.logo a img.alternate'),
    $window = $(window),
    opacityArraya = ["1", "1", "1", "1", "1"],
    headerHeight = 180,
    sectionHeight = 750;

  $window.scroll(function() {
    $header.css('opacity', opacityArray[Math.floor(($header.offset().top + headerHeight)
        / sectionHeight)]);
    $headera.css('opacity', opacityArraya[Math.floor(($headera.offset().top + headerHeight)
        / sectionHeight)]);
  });
});
</script>
<?php
}
add_action('wp_footer', 'custom_logo_script');

Best regards,
Mike

Hi,
Thanks for the feedback, this helps to make more sense. Is your testsite on your localhost? can you put it online so we can assist? It is very difficult to guess at the changes necessary from a screenshot. To make the menu fly out left we have to do a negative left position, here is an example on the menu I can see:

.av-main-nav #menu-item-19330 > ul.sub-menu {
    left: -50px !important; 
}

Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
I took a look at your menu, but the text already seems to be aligned to the left in your sub-menu. To match the sub-menu font size with the main menu font size, please try this css:

.sub-menu > li > a > .avia-menu-text {
font-size: 16px !important;
}

Best regards,
Mike