Hey Julio,

Thank you for the inquiry.

You can actually use the Image element to open the video as an external link, just make sure to apply the “noLightbox” class name in the Advanced > Developer Settings > Custom CSS class field to prevent lightbox from opening. For the play button, you can try this css code.

.avia-image-container:hover .avia-image-overlay-wrap:before {
    content: 'Play Button Here';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1000;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
}

Just replace the content value with an actual play button image or a font icon.

Best regards,
Ismael

Hi,

Great! Glad we could help. Please do not hesitate to open another thread if you need anything else.

Have a nice day.

Best regards,
Ismael

Hi,

No problem. Let us know if you need anything else.

Have a nice day.

Best regards,
Ismael

Hi,

Thank you for the update.

The single quotes in the code have been converted to their html entity code. Please make sure to copy the snippet directly from this forum, and not from your email. Let us know if that works.

Best regards,
Ismael

Hi,

No problem. For some reason, we do see any stripes between the menu items. You can check the screenshot above to see how it looks on our end.

If you have more questions, please feel free to open another thread. We will close this thread for now.

Have a nice day.

Best regards,
Ismael

Hi,

@WFO: Looks like a styling issue. Did you adjust the style of the header? Please try to disable the css modification temporarily, then purge the cache. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

@marketingnr: Both the main menu and alternate menu are displaying in the site. How did you modify the templates?

Best regards,
Ismael

Hi,

Thank you for the update.

The quantity buttons are not displaying on those products because the Inventory > Stock Quantity value is already set to 1. When we changed the value to 2 or more, the buttons displayed back. (see private field)

Best regards,
Ismael

Hey Steve,

Thank you for the inquiry.

You may need to adjust the css code a bit. The modification is provided in the following link.

// https://kriesi.at/support/topic/adding-gradient-overlay-on-fullwidth-slider/#post-1330942

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hi,

No problem. Let us know if you need anything else.

Have a nice day.

Best regards,
Ismael

Hi,

Thank you for the update.

Looks like you already adjusted the widget position with this css code.

#top #header #header_main .widget {
    position: absolute;
    right: 100px;
    top: -20px;
}

Let us know if you need more help with this.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The slider relies on the jQuery script in order work properly, but since the scripts are lazy loaded using RocketLazyLoadScripts function, the slider images do not display. You may need to exclude jQuery from lazy loading and set it to load normally.

To disable the fade in effect for the first slider, add this css code.

.avia-slideshow li:first-child {
    opacity: 1 !important;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings, and purge the cache after adding the css code.

Best regards,
Ismael

Hey Vichardo,

Thank you for the inquiry.

Have you tried using the Fullwidth Slider element instead? Please note that the Fullscreen Slider element will inherit the height of the browser viewport. The images inside have to adapt to the slider size and may overflow if their aspect ratio is not the same as the device screen.

If you want to adjust the style of the slider on mobile view, try this css code.

@media only screen and (max-width: 767px) {
  .avia-fullscreen-slider .avia-slideshow>ul>li {
    background-size: contain !important;
    background-repeat: no-repeat;
  }

  .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
    height: 270px !important;
  }
}

You can also set the size of the background images to inherit the actual size of the slider but they may get distorted a bit.

.avia-fullscreen-slider .avia-slideshow>ul>li {
    background-size: 100% 100% !important;
}

Best regards,
Ismael

Hey vbonora,

Thank you for the inquiry.

You can try using this script in the functions.php file to close the active tab section content after clicking on an active tab title.

// a custom script
function ava_custom_function_script(){
    ?>
    <script>
      (function($) {
        $(document).ready(function() {
            $(".av-tab-section-container .av-section-tab-title").on("click", function(e) {
                var clicked = $(this);
                var id = clicked.data("av-tab-section-title");
                var container = clicked.parents(".av-tab-section-outer-container");
                var tab = container.find(".av-layout-tab[data-av-tab-section-content='"+ id +"']");
                var tab_inner = container.find(".av-layout-tab-inner");
      
                if (tab_inner.css("height") != "0px") {
                    setTimeout(function() {
                          clicked.removeClass("av-active-tab-title");
                          container.find(".av-tab-section-inner-container").css("transform", "translate3d(0%, 0px, 0px)");
                          container.find(".av-active-tab-content").removeClass("av-active-tab-content");
                          $(tab_inner).css("height", "0px");
                    }, 300);
                }
            });
        });
      }
      )(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_function_script');

Best regards,
Ismael

Hi,

We modified the css a bit to override the styles added by css hero.

@media only screen and (max-width: 767px) {
  #top .av-subnav-menu {
    margin: 0;
    max-height: 51px;
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    width: 100%;
    height: 51px !important;
    line-height: 51px !important;
  }

  html>#top>#wrap_all>#main>#sub_menu1>div>#av-custom-submenu-1>li {
    overflow: visible !important;
    display: block !important;
    float: left !important;
    padding-top: 0 !important;
  }
}

As you can see in the screenshot below, the submenu is now scrollable.

Unfortunately, site optimization is beyond the scope of support but one thing that we would recommend is to completely disable css hero because it adds redundant and unnecessary css codes in the site. If you check the css dashboard, there are now 10,000 css rules, which contains empty declarations and repeated css. For more info about site optimization, please check the following articles.

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hey 1-springer,

Thank you for the inquiry.

Videos added on sliders or color sections are disabled on mobile devices by default, which is why there is an option to add a fallback image. The video will be automatically replaced with the fallback image on smaller screens. If you really need to show the video on mobile view, try to use the layer slider element.

Best regards,
Ismael