Hi,
Thanks, please remove the opacity and change the background color like this:

#header.av_header_transparency {
    background: rgba(0, 0, 0, .7);
}

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

Best regards,
Mike

Hi,
Sorry for the very late reply and thanks for the link to your test page.
Instead of editing the theme javascript files, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script() { ?>
    <script>
(function($){
  $(document).ready(function(){ 
$('.toggler').bind('mouseover', function(){ 
    $(this).trigger('click'); 
});
});  
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

this will work on your whole site, let us know if you want it to only work on one page.

Best regards,
Mike

Hey Blatze,
Sorry for the late very reply, I rewrote this script a little and added a “span” around each content “block”. I created a test page on your site so you could examine a working example, please see the link in the Private Content area.
This is the HTML I used in a code block element on the test page:

<span class="learn-more">Opening content
<a class="click-learn-more" href="#">Learn more…</a>
<span class="learn-this">Toggled content</span>
</span>

I then cloned the code block 6 times.
This is the function I added to your functions.php, I also disabled your other function and css.

function custom_toggle_script() { ?>
    <script>
(function($){
  $(document).ready(function(){ 
    $('.learn-this').hide();
    $('.click-learn-more').click(function(e){
    e.preventDefault();
    var $this = $(this).parent().find('.learn-this');
    $(".learn-this").not($this).hide();
    $this.toggle();

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

now on the test page only one toggle will be open at a time.

Best regards,
Mike

Hey webWahine,
Sorry for the late reply and thanks for the login. Instead of applying opacity, try making the background color transparent like this:

#header.av_header_transparency {
    background: transparent;
}

If you would like the main menu text to be a different color before scroll, and then use the theme colors after scroll, please try this css:

.av_header_transparency #avia-menu > li > a {
	color: #FFEB3B;
}

Please adjust color to suit and then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
I see that you have a Mega Menu under “Produkte”, but what do you want to do to it?

Best regards,
Mike

Hi,
Sorry, I’m not sure what you mean, please explain.

Best regards,
Mike

Hi,
Perhaps this solution will work for you instead.
If not then can you include a admin login in the private content area so we can investigate further.

Best regards,
Mike

Hi,
Your test page doesn’t seem to be the same so I looked at the “UNSERE PRODUKTBEREICHE” section on your homepage,
try this css:

.iconbox:hover a.iconbox_icon {
	  color: #008eca !important;
}
.iconbox:hover .iconbox_content_title {
	color: #008eca !important;
}

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

Best regards,
Mike

Hi,
Please try this css:

#top.page-id-11963 a.iconbox_icon:hover {
    box-shadow: 0 0 0 rgba(255,0,0, 0.4);
      animation: pulse 2s infinite;
    z-index: 999 !important;
    position: relative;
    }
    
    @-webkit-keyframes pulse {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      }
      70% {
          -webkit-box-shadow: 0 0 0 100px rgba(255,255,255, 0);
      }
      100% {
          -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      }
    }
    @keyframes pulse {
      0% {
        -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
        box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
      }
      70% {
          -moz-box-shadow: 0 0 0 100px rgba(255,255,255, 0);
          box-shadow: 0 0 0 100px rgba(255,255,255, 0);
      }
      100% {
          -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
          box-shadow: 0 0 0 0 rgba(255,255,255, 0);
      }
    }

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

Best regards,
Mike

Hi,
Sorry, perhaps I’m not understanding correctly, can you also make a video of what you are seeing in the WordPress simulator, and can you post a dropbox link to a plain text file with your page shortcode so we can test?
You can get the page shortcode by following these steps: Enable Avia Layout Builder Debugger

Best regards,
Mike

Hi,
Please try this css:

#top .slideshow li img,#top .slideshow li>a {
    height: 100% !important;
}

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

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Please try this css:

.avia-image-overlay-wrap a.avia_image .image-overlay .image-overlay-inside {
    left: -91px !important;
    top: -8px !important;
}

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

Best regards,
Mike

Hi,
Sorry for the very late reply, as I understand your first question about what you would like to do on your shop page, in mobile, you want the sidebar on top, then the content.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
  #main > .container_wrap_first.template-shop.shop_columns_5 > .container {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #main > .container_wrap_first.template-shop.shop_columns_5 > .container > main {
      order: 3 !important;
      padding: 0 !important;
  }
  #main > .container_wrap_first.template-shop.shop_columns_5 > .container > aside {
      order: 2 !important; 
  }
  #main > .container_wrap_first.template-shop.shop_columns_5 > .container > header {
      order: 1 !important; 
  }
  }

I don’t believe this will affect any other pages, but please check thoroughly.
After applying the css, please clear your browser cache and check.

Best regards,
Mike