Hi,
Thank you for your patience, I found the solution a little more complicated because you are using the Sticky with curtain effect Footer Behavior, but by adding this custom class to the color section with the overlay columns: top-column-overlay-with-curtain-footer and this css:

#top.av-curtain-footer.av-curtain-activated #main > *:not(.av-curtain-footer-container) {
    z-index: 2;
}
#top.av-curtain-footer.av-curtain-activated #main > .top-column-overlay-with-curtain-footer  {
	z-index: 5;
}

Please note that the following color section should have it’s height set to at least 35% or 300px to allow for the column overlay.
I tested this on your homepage and /sunbeckia/
please clear your browser cache and check.

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 Ismael 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,
Unfortunately your theme has not been updated, please see your other thread for more info.

Best regards,
Mike

Hi,
To make your grid row element sticky you can use the same script that was given in another thread:

function custom_collant_script() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $(function() {       
     var scroll_start = 0;
     var startchange = $('.avia-section.collant');
     var offset = startchange.offset();
     var width = $(window).width()
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if((width >= 990) && (scroll_start > offset.top - 117)) {
          document.querySelector('.avia-section.collant').classList.add('sticky-top');
         } else {
          document.querySelector('.avia-section.collant').classList.remove('sticky-top');
         }
     });
      }
  });
})(jQuery);
});
</script>
    <?php
}
add_action('wp_footer', 'custom_collant_script');

I added this custom class to the grid row for you avia-section collan

and now the grid row sticks near the top, the only thing is that this function sticks 117px from the top because on the other page you had a sticky header, but for product pages it looks like you want to remove the sticky header, is this correct or are you going to use a sticky header on your product pages too?

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 to hear that you have this sorted out, and thanks for following up with your solution. 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 whdsolutions,
Thanks for the screenshot but I’m not able to reproduce this in Chrome Dev Tools (320px – 425px) or on an actual Android device (360px).
I also tested with browserstack.com on a live iPhone 13 and there was no gap.
If you are testing with an iPhone, can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Please see the screenshots in the Private Content area.

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,
To add more pages add them like this:
if(is_page(array(42, 21, 85))) {

Best regards,
Mike

Hi,
Glad to hear, you should be able to use wp-rocket, we just wanted to clear the cache. Try enabling it again and checking, also use the wp-rocket options to clear it’s cache, if all is good then try enabling the theme Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression, if all is fine then good you are all set, if you see an error again then check if wp-rocket has a minifying option enabled, if so disable this option, because if the theme and wp-rocket are both minifying this could cause issues.
Try different settings until all is working well again.

Best regards,
Mike

Hi,
Glad this helped, it is a customization for you so keep in your child theme, unless there is anything else we can help with on this issue, shall we close this then?

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 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 Asterios,
This is because for mobile the theme doesn’t expect a fixed header as your customization, so the sticky menu has it’s height set to auto and position absolute.
For your situation try this css:

@media only screen and (max-width: 782px) { 
	#sub_menu1 {
		 top: 117px !important;
		 position: fixed !important;
	}

}

@media only screen and (min-width: 783px) and (max-width: 989px) { 
	#sub_menu1 {
		 top: 121px !important;
		 position: fixed !important;
	}
}

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

Best regards,
Mike