Hey TBant,

Thank you for the inquiry.

You can add this css code to disable the hover animation or fadein effect for the mega menu container and make it a bit more snappy:

#top #header .avia_mega_div {
  opacity: 1 !important;
  display: none !important;
}

#top #header li:hover .avia_mega_div {
  opacity: 1 !important;
  display: block !important;
}

The code above should override the transition created by the avia.js script.

Best regards,
Ismael

Hi,

You can align the content to the center by adjusting the padding of the catalogue and column container.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-catalogue-container.av-97hmxr-301bb1c6948008b057bb3f52570c7b0a {
    padding: 0;
  }

  .flex_column.av-9f5qr3-599781cc99ea2052a986d82c23483122 {
    padding: 0;
  }
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey Erwin,

Thank you for the inquiry.

We’ve found a script error in the browser console that could be the cause of the issue. Did you insert this script?

<script type="text/javascript" id="layerslider-js-after">
    jQuery(function() {
        /// more here
    });
</script>

Please try to temporarily deactivate the Autoptimize plugin and disable the Enfold > Performance > File Compression settings. Let us know of the result.

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Scott,

Apparently, I misunderstood you. I thought you wanted a button to unmute the video on mobile. Our developers might add a button to unmute the video on mobile but it is not possible to autoplay an unmuted video as Ismael mentioned.

It’s a bad user experience to auto-play a video with sound. That’s why browsers are disabling it.

If you really need that, please hire a freelance developer to implement it.

Regards,
Yigit

Hi,
Try changing your css to this:

#top .layout-wholebox:hover .layout-image {
    filter: grayscale(100%);
    transition: all 0.4s ease-in-out;
}

Best regards,
Mike

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey!

To test this, we disabled Autoplay on the Video element. The video has sound by default when played manually, even in mobile view. You cannot control the volume using the video controls, but you can adjust it using the physical volume controls of your phone.

Best regards,
Ismael

Hey Lukasz,

Please continue here: https://kriesi.at/support/topic/woocommerce-enfold-2/

Best regards,
Ismael

Hey Christy,

Thank you for the inquiry.

You can add this css code to adjust the position of the arrow inside the box:

#top #wrap_all .avia-slideshow-button, #top .avia-button, .html_elegant-blog .more-link, .avia-slideshow-arrows a:before {
    border-radius: 5px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 0;
    padding-bottom: 15px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Have you tried adjusting the value of the padding and font size properties to make the pills smaller?

@media only screen and (max-width: 479px) {

  /* Add your Mobile Styles here */
  #top .av-pill-tabs .av-section-tab-title {
    margin-right: 10px;
    padding: 0 !important;
  }

  .av-pill-tabs .av-inner-tab-title {
    color: #FFFFFF;
    font-size: 0.7em;
    margin-bottom: 0px !important;
    line-height: .5em;
    padding: 4px !important;
  }
}

Best regards,
Ismael

Hi,

Thank you for the info.

You can place the css code that we previously recommend below your own modifications. This should override the previous styles and fix the positioning of the arrows.

.grid-content .avia-arrow, .tag .grid-content .avia-arrow {
    z-index: 10;
    border: none;
    top: -5px;
}

.grid-content .entry-content-header {
    z-index: 20;
    position: relative;
}

.tag .grid-content {
    position: relative;
}

.tag .grid-content .avia-arrow {
    border: none;
    top: -11px;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can add the following css code to adjust the width of the header container on mobile view. This should also move the burger icon slightly to the right.

@media only screen and (max-width: 480px) {
  .responsive #top #wrap_all .container {
    width: 90%;
    max-width: 90%;
  }
}

Best regards,
Ismael

Hey Stefan,

Thank you for the inquiry.

There is no option for this by default but you might be able to use the avf_form_send filter to check the content of the contact form fields before sending the email. Usage examples can be found in the links below:

// https://kriesi.at/support/topic/contact-form-submit-button-hook/#post-1370093
// https://kriesi.at/support/topic/form_submit-event-not-fired-with-enfold-form/#post-1425948
// https://kriesi.at/support/topic/work-with-variables-sent-by-enfold-form-avia_process_form_data/#post-1070392

Best regards,
Ismael

Hi,

Thank you for the update.

This might help with the scroll offset issue: https://kriesi.at/support/topic/scroll-margin-top-scroll-padding-top-css-properties/#post-1432926

Best regards,
Ismael