Hi,
The script above should work correctly for mobile only, just use this css instead of the css above:

@media only screen and (max-width: 767px) { 
#header_meta.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:10000!important;
	width: 100%;
}
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the screenshot, but when I checked on Windows in Chrome, Firefox, & Edge the icons showed for me, try clearing your browser cache, if you are using Safari follow these steps for Safari and note step 4 where you will Clear the History.

Best regards,
Mike

Hi,
To make the background images full height add height: 100%; to the .image-main img rule.
For mobile the original site changed the orintaion from vertical to horizontal to add this to your example replace the css above to this:

@media (max-width:989px) {
	.nav-mainarea {
		max-height: 100vh;
	}
    .nav-mainarea .nav-mainarea-item {
        width:100%;
        max-height: 25vh;
        padding-left: 30px
    }
    .nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text {
        transform: translateX(15vw)
    }
}
@media (min-width: 990px) {
	.nav-mainarea .nav-mainarea-item {
    width: 25%;
    height: 100%;
    padding: 30px;
	}
	.nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text {
    transform: translateY(-45vh);
    
}
}
.nav-mainarea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;
}
.nav-mainarea .nav-mainarea-item {
display: flex;
    transition: all .3s ease-out;
    border-right: 1px solid rgba(255,255,255,.5);
    text-decoration: none;
}

.nav-mainarea .nav-mainarea-item .nav-mainarea-text {
    margin-top: auto;
    color: #000;
    transition: all .3s ease-out;
}
.nav-mainarea .nav-mainarea-item h2 {
    margin: 0;
    line-height: 1.6;
    color: #ca0202;
}

.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
}

#top.page-id-3157 #av_section_1 > .container {
	max-width: 2500px;
	width: 100%;
	padding: 0;
}
.image-main img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}
.image-main img.is-visible {
    opacity: 1;
    z-index: 1;
    display:block;
}
.fade-in-image {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

Best regards,
Mike

Hi,
Glad Guenni007 was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thanks for the feedback I added a fadeIn keyframe set to 3 seconds to the code below, please give this a try.

<script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
$('.image-main .nav-mainarea-item').bind('mouseover', function(){
    var myEm = $(this).attr('data-img');
    $('.image-main img').removeClass('is-visible');
    $('.image-main img[data-img = '+myEm+']').addClass('is-visible');
});
})(jQuery);
 });
</script>
<style>
.nav-mainarea {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;
}
.nav-mainarea .nav-mainarea-item {
display: flex;
    transition: all .3s ease-out;
    width: 25%;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,.5);
    padding: 30px;
    text-decoration: none;
}
.nav-mainarea .nav-mainarea-item .nav-mainarea-text {
    margin-top: auto;
    color: #000;
    transition: all .3s ease-out;
}
.nav-mainarea .nav-mainarea-item h2 {
    margin: 0;
    line-height: 1.6;
    color: #ca0202;
}
.nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text {
    transform: translateY(-45vh);
    
}
.nav-mainarea .nav-mainarea-item:hover {
    text-decoration: none;
}

#top.page-id-3157 #av_section_1 > .container {
	max-width: 2500px;
	width: 100%;
	padding: 0;
}
.image-main img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: 0;
    z-index: 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
.image-main img.is-visible {
    opacity: 1;
    z-index: 1;
    display:block;
}
.fade-in-image {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
</style>

<div class="image-main">
<img class="nav fade-in-image is-visible" data-img="1" src="../wp-content/uploads/2022/03/PhotoRag_Metallic_Mood.jpg">
<img class="nav fade-in-image" data-img="2" src="../wp-content/uploads/2022/03/RS171_Hahnemuehle__3_-lpr.jpg">
<img class="nav fade-in-image" data-img="3" src="../wp-content/uploads/2022/03/Hahnemuehle_Notebook_Iconic_A5_Schwarz-black_and_taupe_mood_web.jpg">
<img class="nav fade-in-image" data-img="4" src="../wp-content/uploads/2022/03/hfa_filtration.jpg">

<div class="nav-mainarea">                                 
    <a class="nav-mainarea-item nav" data-img="1" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Digital FineArt</h2>
                
            Turning images into Art
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="2" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Artist Papers</h2>
                
            The Art of Expression
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="3" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Stationery</h2>
                
            Notebooks & Writing Instruments
        </div>
    </a>

    <a class="nav-mainarea-item nav" data-img="4" href="#">
        <div class="nav-mainarea-text">
            
                    <h2>Filtration</h2>
                
            Technical Applications
        </div>
    </a>             
</div>
</div>

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Dare_Care,
Thanks for your question, in the testimonial items if you add a website url in the advanced tab:

and add this script to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_testimonial_link_script() { ?>
    <script>
(function($) {
  $(".avia-testimonial").click(function(){
      window.location = $(this).find("a.avia-testimonial-link").attr("href");
      return false;
  });
  $(".avia-testimonial").mouseover(function(){
      $(this).css("cursor", "pointer");
  });
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'custom_testimonial_link_script');

then each testimonial element will have the link and show a pointer on mouse-over

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear, the original time was 0.6s, so this 1.9s makes it slower, the higher the number the slower it should be.

Best regards,
Mike

Hi,
I have not tested any of these, or looked for a “Floating Widget” before, but perhaps Floating Button or Side Menu Lite would work. If the player already has an icon you could try to make it sticky alone with Sticky Menu & Sticky Header (WP Sticky Anything)
But it sounds like you might want to ask a freelancer to help you create this with javascript.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey lauterkeit,
Thank you for the link to your site and the screenshot, to move the date and make it black, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_masonry_date() { ?>
    <script>
(function($){
  $( 'a.av-masonry-entry' ).each(function() {
  $( this ).find( '.av-masonry-date' ).css({ 'color': '#000'}).insertBefore( $(this).find('.av-masonry-entry-content'));
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'move_masonry_date');

the expected results

Best regards,
Mike

Hi,
For that one you will need to create a transparent image of the icon with the rings around it and then use it to replace the icon with css.
For example imagine this as your image, but with a transparent background

then you wouls use this css with the url to your image:

#main .iconbox .iconbox_icon {
	background: url(https://savvyify.com/img/images/2022/03/27/2022-03-27_009.jpg);
	height: 60px;
	width: 60px;
	font-size: 0px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	border: none;
	background-position: center 11px;
}

then the result would be:

Best regards,
Mike