Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey rixi,

Thank you for the inquiry.

The changes are being overridden by the H4 style configuration in the Advanced Styling panel. You may need to remove that configuration or add the following code to the Quick CSS field.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .avia-timeline-container.av-meoc0fve-0ab7d904c4d6448157070948d8d30f71 .av-milestone-title {
    font-size: 20px;
  }
}

Best regards,
Ismael

Hi,

why does my Home page look good on desktop, but loses those settings on smaller screens and mobile?

The issue occurred because a css media query in the Quick CSS field was not closed properly. We have corrected the css code. Please make sure to purge the cache before testing the page.

Best regards,
Ismael

Hi,
Glad to hear that this works. To change the background image in a color section like a slideshow, add a custom class “color-section-slideshow” to your color section in the Advanced ▸ Developer Settings ▸ Custom CSS Class (no dot)
Then add this snippet in your child theme functions.php

function color_section_slideshow() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function () {
  // Target your color section
  const section = document.querySelector(".color-section-slideshow");
  if (!section) {
    console.warn("No element found with selector .color-section-slideshow");
    return;
  }

  // List of background images
  const images = [
    "/wp-content/uploads/path-to-image1.jpg",
    "/wp-content/uploads/path-to-image2.jpg",
    "/wp-content/uploads/path-to-image3.jpg",
  ];

  if (!images || images.length === 0) {
    console.warn("No images provided for slideshow");
    return;
  }

  let current = 0;
  const delay = 3000; // ms between slides
  const transitionDuration = 1000; // ms for transition
  const effect = "fade"; // "fade" or "slide"
  section.style.position = section.style.position || "relative";
  section.style.overflow = "hidden";
  section.style.backgroundImage = url(${images[0]});
  section.style.backgroundSize = "cover";
  section.style.backgroundPosition = "center center";
  images.forEach((src) => {
    const img = new Image();
    img.src = src;
  });
  const overlay = document.createElement("div");
  overlay.style.position = "absolute";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundSize = "cover";
  overlay.style.backgroundPosition = "center center";
  overlay.style.zIndex = "0";
  overlay.style.pointerEvents = "none";
  overlay.style.opacity = "0";
  overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
  section.appendChild(overlay);

  function showNextImage() {
    current = (current + 1) % images.length;
    overlay.style.backgroundImage = url(${images[current]});

    if (effect === "fade") {
      overlay.style.transform = "none";
      overlay.style.opacity = "1";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.opacity = "0";
      }, transitionDuration);
    } else if (effect === "slide") {
      overlay.style.transition = "none";
      overlay.style.transform = "translateX(100%)";
      overlay.style.opacity = "1";
      overlay.offsetHeight;
      overlay.style.transition = transform ${transitionDuration}ms ease-in-out;
      overlay.style.transform = "translateX(0)";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.transition = "none";
        overlay.style.opacity = "0";
        overlay.style.transform = "translateX(100%)";
        setTimeout(() => {
          overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
        }, 20);
      }, transitionDuration);
    }
  }
  const intervalId = setInterval(showNextImage, delay);
});
</script>
  <?php
}
add_action( 'wp_footer', 'color_section_slideshow', 99 );

Change the images in the snippet to suit and change const effect = “slide”; to “fade” or “slide” as you wish.

Best regards,
Mike

• This reply was modified 4 months ago by Mike. Reason: corrected snippet

Hi!

If you need to adjust the color of the search icon as well, include the following css code.

#top #header .av-main-nav > li > a > svg:first-child, #top #wrap_all .header_color .cart_dropdown_first .cart_dropdown_link.avia-svg-icon svg:first-child {
    fill: #006ab5;
    stroke: #006ab5;
}

Best regards,
Ismael

Hi,

Thank you for the info.

You can try this css code to adjust the height of the slider on smaller screens.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .av-k5zwtv35-b503e223437d26141b6108faf533b96b .avia-slideshow-inner {
    height: 80vh !important;
  }

  #top #wrap_all .av-k5zwtv35-b503e223437d26141b6108faf533b96b .avia-slideshow-inner li,
  #top #wrap_all .av-k5zwtv35-b503e223437d26141b6108faf533b96b .avia-slideshow-inner li div,
  #top #wrap_all .av-k5zwtv35-b503e223437d26141b6108faf533b96b .avia-slideshow-inner li div img {
    height: 100%;
    object-fit: cover;
  }
}

Result:

Best regards,
Ismael

Hey Stefan,

Thank you for the inquiry.

You can enable the Enfold > Performance > Delete old CSS and JS files? option to automatically delete these files. This option is located at the very bottom of the Performance panel. If the files persist, you can manually delete them (make sure to create a backup first), then resave the theme options to regenerate the dynamic scripts and stylesheets.

You can also disable the file compression settings in Enfold and instead enable the compression option in your caching plugin, or install a dedicated optimization plugin such as Autoptimize or BWP Minify.

Hope this helps.

Best regards,
Ismael

Hey koomo,

Thank you for the inquiry.

Please add this css code to adjust the position of the overlay inside the carousel.

.swiper-slide span.image-overlay.overlay-type-image {
    left: 0 !important;
    top: 0 !important;
}

Best regards,
Ismael

Hi,
Thanks for your patience, the reason this is occuring is becuse you have a script adding the read more links:

(function($){
  $(window).on('av-height-change', function() {
    $('.av-masonry:not([class*="-gallery"]) .av-masonry-entry').each(function() {
      var more = $(this).find('.av-masonry-read-more');
      var cont = $(this).find('.av-masonry-entry-content');
  
      if( more.length == 1 ) return;
      cont.append('<div class="av-masonry-read-more">Lees meer ></div>');
    });
  });
})(jQuery);

they are added after the page load and the masonry has set the abosulte item heights, which is used in the grid placement, thus the 36px height of the read more offsets the 30px margin bottom, so you have no space. This is also occuring on the desktop version, there you have set a 70px bottom margin, but after the read more is added the space looks about 30px, you probly didn’t notice.
So the solution is to change your custom css for mobile from margin-bottom: 30px !important; to margin-bottom: 70px !important;

Best regards,
Mike

Hi,
Typically updating from v4.x to v7.x should cause no major issues as the theme is backward compatible, but if your child theme has any customized elements, or a header.php or footer.php, these will cause issues, and should be removed first.
Updating via FTP by overwriting the theme files will also cause issues as older files will be left behind, updating by uploading the theme as “new” in the WP backend is safer as WordPress removes the old directory and then adds the new directory.
I have not seen an issue where an update lead to the shortcodes showing (e.g. [av_textblock]), do you see the shortcodes on the frontend or in the backend in the Block Editor? Pages & Posts created with the ALB (Advanced Layout Builder) should not be opened, edited, or saved with the Block Editor, always edit ALB pages with the ALB editor. Also don’t use any other builders like elementor, beaver builder, visual composer, etc.
Incremental updates is not needed as I have seen v3.x updated without issues. I recommend exporting your child theme settings for backup, and exporting the layerslider sildes. Then create a staging site to test the update on, this way your live site is unchanged while your issue can be examined. Ensure that your stagging site is not using a cache plugin or object-oriented cache from your server, or a CDN, as these may not show the updated site correctly.
The only issues that I find for Ninja Forms are old:
2015: https://kriesi.at/support/topic/customize-ninja-form-styling/
2016: https://kriesi.at/support/topic/enfold-ninja-forms-conditional-logic-problems/
2019: https://kriesi.at/support/topic/ninja-forms-not-working-after-latest-wordpress-update/
2021: https://kriesi.at/support/topic/ninja-forms-breaking-with-enfold/
Note that the layerslider has had many changes and you may need to edit your slides and resave the transforms and minor settings, there is nothing we can do about that, the layerslider doesn’t seem to be fully backward compatible.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

For the follow-up inquiries, please continue here: https://kriesi.at/support/topic/color-setting-logo-area-heading/

Best regards,
Ismael

Hey schub1981,

Thank you for the inquiry.

We may need to inspect the elements on your site in order to provide an appropriate solution. Please provide the site URL in the private field. Have you tried adjusting the color options in the Enfold > General Styling > Logo Area tab?

In the meantime, to adjust the color of the burger menu icon on mobile view, try to use the following css code:

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

  /* Add your Mobile Styles here */
  .header_color .av-hamburger-inner,
  .header_color .av-hamburger-inner::before,
  .header_color .av-hamburger-inner::after {
    background-color: #da2727;
  }

  .html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet,
  .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner,
  .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before,
  .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #da2727;
  }
}

Best regards,
Ismael

Hey ckrizman,

Thank you for the inquiry.

There is no built-in option for this by default, but you can adjust the svg divider position using css. For example, you can use the following code to move the top divider 50px upward and the bottom divider 100px downward:

.avia_transform .av-extra-border-element.border-extra-diagonal {
    height: 250px;
    margin-top: -100px;
}

.avia-divider-svg.avia-divider-svg-tilt.avia-divider-svg-top.avia-flipped-svg.avia-to-front.avia-svg-original {
    margin-top: -50px;
}

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Most of the color styling options are located under Enfold > General Styling. You can check the preview to see which element a specific field controls. If you can’t find the correct setting there, you can also edit the element in the Advanced Layout Builder and adjust the color options in the Styling tab.

To adjust the color of the phone number, please add this code in the Quick CSS field:

#top .header_color .phone-info a {
    color: #ffffff;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes take effect.

Let us know the result.

Best regards,
Ismael

Hey samholl,

The update to 7.1.2 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard