Reply To: Add the same banner as on the blog page, on the category page

Hey laboiteapixels12,
Thank you for the login to your site, but it is not an admin login so I was limited.
I see that on your category pages you are displaying the category description and I assume that you would like this as the title in the banner image like the blog page is displayed.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_category_banner() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('#top.archive.category').each(function() {
  	var catTitle = $('.category-term-description p').text();
  	var catBanner = $('<div class="avia-section avia-full-stretch fullsize cat-banner"><div class="av-section-color-overlay-wrap"><div class="av-section-color-overlay"></div></div><h1>'+ catTitle +'</h1></div>');
  	$(catBanner).insertBefore('.container_wrap_first');
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_category_banner');

Please copy the code from the forum and not from an email notification so the symbols are copied correctly.
Then add this css to your child theme stylesheet or the theme option Quick CSS:

.avia-section.cat-banner {
	height: 283px;
	color: #fff;
    background-color: #f7f4ef;
    background-image: url(https://jean-michel-cosson.fr/wp-content/uploads/2022/10/blog-articles-par-jean-michel-cosson-3.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: scroll;
}
.avia-section.cat-banner h1 {
  margin: 0;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.avia-section.cat-banner .av-section-color-overlay {
    opacity: 0.4;
    background-color: #2b2b2b;
    height: 283px;
}
#top.archive.category .category-term-description {
	display: none;
}

This is the expected results:

Best regards,
Mike