Hi,
Thank you for your patience, in your video it looks like the special heading text is bold, so I believe that you have used “strong” tags in the special heading and perhaps didn’t close it correctly, so when you save the page all of the elements after it are lost, this is a common error, but I can’t check because we don’t have a login to your site. Please include an admin login in the Private Content area so we can be of more assistance.
As for your burger menu it looks like you have added 4 phone links to your header somehow, none show on the frontend, the one that does show in the top bar is a fifth, so these seem to be causing the issue, try removing these:

If this doesn’t help we can take a look to see what else could be the issue.

Best regards,
Mike

Hi,
Thank you for your patience, I checked again in Windows in Chrome, Firefox, & Edge and in Mac in Safari, Chrome, Firefox and in all cases all of your images show:
Safari on Mac

Chrome on Mac

Firefox on Mac

Firefox on Windows

I didn’t feel a need to post more images. This is very strange that you can’t see these, your images are still coming from https://i0.wp.com I believe this is the JetPack image server, and you still have a CDN “onesingnal”, did you try disabling all of your plugins to get your images to be served from your domain and wordpress install?
Are you using a mobile connection or a limited wifi? Often “data saver” will not show huge images. Have you updated your Mac, old Safari versions had problems with parallax and I have been told that some iPads have their Safari version locked and can’t update.
Have you tried a Windows desktop or a different Mac, try going to your public library or try a VPN and use a IP address from another country.

Best regards,
Mike

Hey leilitacc,
Typically something like this would work:

#top .flex_column:hover {
	animation: grow 2s;
	animation-fill-mode: forwards;
}
@keyframes grow {
  to {
      transform: scale(1.2)
  }
}

but you probably will need to adjust the class for your column, if you need help please link to your page so we can examine.

Best regards,
Mike

Hi,
When you add a media query you will also want to wrap the above rule, so for example for desktop & mobile try this:

@media only screen and (min-width: 768px) { 
.main_color .pricing-table li.avia-heading-row {
    height: 290px;
    min-height: 290px;
}
}
@media only screen and (max-width: 767px) { 
.main_color .pricing-table li.avia-heading-row {
    height: 150px;
    min-height: 150px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey khrntanya,
Thank you for your patience, for the grid row cell that is not showing on mobile, please add a white space element to it with a height of about 500px so it will show.
or you can try this css:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .avia-builder-el-last.no_margin {
    height: 500px !important;
}
}

Best regards,
Mike

Hey dillionline,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function remove_ALB_post_state( $post_states, $post ) {
	if("! has_blocks( $post->ID )") {
		unset($post_states['wp_editor']);
	}
	if("!= Avia_Builder()->get_alb_builder_status($post->ID)") {
		unset($post_states['avia_alb']);
	}
	return $post_states;
}
add_filter('display_post_states','remove_ALB_post_state',999,2);

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add the above code and save.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top ol li a:hover {
	color: red;
}

Best regards,
Mike

Hey LUISCANAL,
Try a back slash before the icon number:

.my-custom-tabs .toggle_icon:before {
    font-family: 'entypo-fontello';
    content: '\e817';
    position: absolute;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    line-height: 0;
    color: red;
}

Best regards,
Mike

Hi,
Thank you for your patience as I understand what you would like to achieve, a full width changing image with a logo in the center at the top of every, post, page, & archive.
I note a few limitations, first none of our sliders offer a random image on page load, so they would always start with the same image and rotate in order. Second you would like to add this to the top of every, post, page, & archive without editing each post & page, etc.
So try this custom code to create this, if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save:

function random_image_slider_shortcode($atts) {
    // Define default attributes and override with user-defined attributes
    $attributes = shortcode_atts(
        array(
            'mobile_height' => '300px', // default mobile height
            'desktop_height' => '500px', // default desktop height
        ),
        $atts
    );

    // Define your image URLs here
     $images = array(
        'https://example.com/wp-content/uploads/image1.jpg',
        'https://example.com/wp-content/uploads/image2.jpg',
        'https://example.com/wp-content/uploads/image3.jpg',
        'https://example.com/wp-content/uploads/image4.jpg',
        'https://example.com/wp-content/uploads/image5.jpg',
    );
    // Start building the output
    $output = '<div id="random-image-slider" class="avia-section container_wrap fullsize" style="height: ' . $attributes['desktop_height'] . '; background-size: cover; position: relative;">';

    // Add logo overlay
    $output .= '<img src="https://example.com/wp-content/uploads/logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" alt="Logo">';

    // Add script for changing the background image
   $output .= '<script>
        (function() {
            var images = ' . json_encode($images) . ';
            var currentIndex = Math.floor(Math.random() * images.length); // Start at a random index
            var container = document.getElementById("random-image-slider");

            function changeImage() {
                container.style.backgroundImage = "url(" + images[currentIndex] + ")";
                currentIndex = (currentIndex + 1) % images.length;
            }

            changeImage(); // Initial call to set the first image

            setInterval(changeImage, 3000); // Change image every 3 seconds

            // Responsive height adjustment
            function adjustHeight() {
                var windowHeight = window.innerHeight;
                var isMobile = window.matchMedia("(max-width: 768px)").matches;
                container.style.height = isMobile ? "' . $attributes['mobile_height'] . '" : "' . $attributes['desktop_height'] . '";
            }

            window.addEventListener("resize", adjustHeight);
            adjustHeight(); // Initial call to set height
        })();
    </script>';

    $output .= '</div>';

    return $output;
}

add_shortcode('random_image_slider', 'random_image_slider_shortcode');

In the code above change the 5 images to your image urls, and ensure to use full urls to the images, and also change the image url in the logo overlay.
If you just wanted to use this script and add the element manually to your pages you could use this shortcode in a code block:

[random_image_slider mobile_height="300px" desktop_height="500px"]

Note that you can change the height of the element for mobile and desktop. Also note that if you use large square images the whole image will not show on every device, the image will be cropped to the height that you set, also this will not be full width when used in a code block element, this is an example of the results:

Now since you want this added automatically to the top of every, post, page, & archive create a second PHP snippet in the WP Code plugin and add this code:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_single() || is_page() || is_archive() ) {
		echo do_shortcode('[random_image_slider mobile_height="300px" desktop_height="500px"]');
	}
}

You can change the heights to suit, since this is added to the pages while the page is being created the element will be full width:

Give this a try.

Best regards,
Mike

Hi,

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

Best regards,
Rikard

Hi,
First add the custom class specialHeight to each 1/4 column that you want the button the hot pepper image to line up below the special heading.
You don’t need to add this to the third odd item or items with no button or image.
Then typically I would add the following script to the end of your child theme functions.php file in Appearance ▸ Editor, but I see that you are not using a child theme so you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function custom_specialHeight_script() { ?>
  <script>
(function($){
  $('.flex_column_table').each(function(){  
     var $specialHeading = $('.specialHeight .av-special-heading',this);
     var specialHeadingHeight = Math.max.apply(Math, $specialHeading.map(function(){
         return $(this).height();
     }).get());
     $specialHeading.height(specialHeadingHeight);
  });
  var resizeId;
  window.addEventListener('resize', function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(doneResizing, 300);
  });
  
  function doneResizing(){
      location.reload();
  }

})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_specialHeight_script', 99 );

I did this for you on your test site.

Best regards,
Mike

Hey Bernd,
Thanks for the link to your site, I don’t have any experience with GTranslate but the mobile menu and desktop menus seems to contain all of the same classes.
The menu items don’t contain real links just a hashtag, so this leads me to believe the GTranslate plugin is preforming a javascript “onclick” event and for some reason it is not working on mobile.
Please note that event pointerenter will not fire on mobile, your plugin should use touch-action I recommend asking your plugin for help with this as they are creating the javascript “onclick” event to change the hashtag into a link.

Best regards,
Mike

Hey micheladalcastagne,
I was not able to see your screenshot because it requires a login, so I had to guess, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .container_wrap {
    border-top-style: none;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I see that whenever a page is edited there is a permissions error for core WordPress files:

one is for a plugin “easy pricing” and I see and error that your Rest API has been disabled, so you made have other plugin conflicts.
comparing the wayback page with your current one, I only see the your headings have a color of #666 now and were #222 but the font sizes is the same, and you icon element font was 21px and now 16px. The problem is that the wayback page uses the Autoptimize cache and now you are not, Autoptimize often breaks the cache styles due to multiple minifying, typically people notice the error and the disable Autoptimize to correct, so I’m not sure if you didn’t realize the error until now when Autoptimize has been disabled and the cache cleared.
When I examine your general style you are using the font color #666 so this leads me to believe that this color is correct and the Autoptimize version was wrong.
I recommend disabling the above plugin and any others that are causing the permissions & Rest API errors.

Best regards,
Mike

Hi,

Great, I’m glad to hear that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

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,

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,

Thank you for the update.

To remove the date on a grid layout added using the Blog Posts element, please add the following css code:

.responsive #top.slide-meta time, .responsive #top.slide-meta time  + .slide-meta-del {
    display: none;
}

This should hide the date in the grid layout while retaining the date within the individual posts.

Best regards,
Ismael

Hi
I adjusted to this to account for the height of the header on desktop.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 989) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
	else if (width >= 990) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '187px'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

and the css:

@media only screen and (max-width: 989px) { 
.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}
}
@media only screen and (min-width: 990px) { 
.responsive #top #sub_menu1.av-submenu-container.sticky-top {
	position:fixed!important;
	top:172px!important;
	z-index:600!important;
}
}

Best regards,
Mike