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

Hi,

Thank you for the update.

Where can we see the issue? We may be able to apply a minimum height to the items or content container to display or to align them consistently. Please provide the page URL in the private field.

Best regards,
Ismael

Hey!

Thank you for the info.

According to our developer, the cloning of the first subitem in the tab element is a default behavior or will happen when the Enfold > Custom Elements > Custom Elements For Subitems is set to the first option.

This is caused by Custom Elements For Subitems
If selected “All subitems use ….” it is a “default” behaviour, select one of the other options it works as usual.

Did you add this code in the functions.php file to enable the advanced CET options?

add_theme_support( 'show_advanced_custom_element_options' );

Regards,
Ismael

Hey Chrilles,

Thank you for the inquiry.

Have you tried adjusting the Menu and Logo Position settings in the Enfold > Header > Header Layout panel? You can also use this css code to adjust maximum width of the containers in the main header.

.html_header_top #top #header_main .container {
    max-width: 1000px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

The filter above should have trimmed the product description and limited it to 10 words. Have you tried applying a minimum height to the grid items? Please provide the page URL in the private field so that we can check the items and provide the necessary css adjustments.

Best regards,
Ismael

Hey landingnet,

Thank you for the inquiry.

What are the errors? Please provide the site URL in the private field. We may have to resolve that error first, then resave the theme options and disable the Performance > File Compression settings temporarily. Also, please make sure to update the theme regularly to avoid this type of issues in the future.

Best regards,
Ismael

Hey Richard,

Thank you for the inquiry.

Have you tried setting the initial opacity of the search icon to zero? You can then bring it back to normal after moving it to the secondary menu.

Best regards,
Ismael

Hey Bernd,

Thank you for the inquiry.

You may need to set the Enfold > Performance > Self hosted videos and audio features (WP-Mediaelement scripts) settings to the third option to enable the WP Media Element script. Make sure to toggle the file compression settings as well afterwards.

Best regards,
Ismael