ismaels filter (ava_inside_main_menu) is a brilliant idea.

maybe it is easier to use if we insert a social bookmarks shortcode:
then we can use all those benefits of enfold options dialogs – and hover styling etc.

function social_bookmarks_shortcode_inside_main_menu() {
  $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
  $social = avia_social_media_icons($social_args, false);
  return $social;
}
add_shortcode('social-bookmarks', 'social_bookmarks_shortcode_inside_main_menu');

add_action( 'ava_inside_main_menu', function() {
    echo do_shortcode('[social-bookmarks]');
});

Quick css for your setting (left burger – logo – socials )

#top div .logo {
  z-index: 101 !important;
}

#top .main_menu, 
#top .avia-menu {
  width: 100%;
}

#avia-menu #menu-item-search {
  position: absolute;
  right: 0;
  left: auto;
}

#top #wrap_all .av-hamburger-inner {
  display:block;
  top: 0;
  margin-top: 4px;
}

.html_header_top #top #wrap_all .av_logo_right #header_main .logo {
  position: relative;
  left: 50%;
  right: auto;
  margin-left: unset;
  margin-right: unset;
  transform: translateX(-50%);
  width: auto;
}

.responsive #top #wrap_all  .main_menu {
  width: 100%;
  display: flex !important;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: inherit;
}

#top #wrap_all .menu-item-avia-special {
  display: block ;
}

.responsive #top #wrap_all #header .main_menu ul.social_bookmarks {
    display: flex;
}

#top #wrap_all .main_menu ul.social_bookmarks li a {
  height: 30px;
}

#top .main_menu .social_bookmarks li {
  width:40px;
  margin-left:5px
}

#top .main_menu .social_bookmarks li.avia-svg-icon img[is-svg-img="true"],
#top .main_menu .social_bookmarks li.avia-svg-icon svg:first-child {
  height:1.1em;
  width: auto;
  margin-top: 4px !important;
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;
  }
  .html_header_top #top #wrap_all .av_logo_right #header_main .logo {
    max-width: 200px;
    transform: translateX(-57%);  /* === an individual correction - depends on how many social icons are present=== */
  }
}

see : https://elementar.webers-webdesign.de/

PS: for more than 3 social bookmarks it gets complicated on small mobile screens. So maybe in this case we set them to display none – or switch in this case to header meta solution

PPS: i tried first that option to show social icons via Header – Extra Elements – Header Social Icons : “display in main header area”
but this was to complicated to find the right css positioning options – especially on shrinking headers.

the link comes from enfold itself. You do not need to insert on title input field links.

because of “Lösungen” now in german

ich sehe deine Seite nicht (als Participant ) aber versuch mal stattdessen:

#top #wrap_all .avia_mega_div {
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px)
}

#top #wrap_all #header .avia_mega_div ul, 
#top #wrap_all #header .avia_mega_div ul * {
    background: transparent ;
    color: #000; /**** das war nur um es an meiner Testumgebung umzusetzen ***/
}

die hover styles der menu-punkte bleiben bestehen – was für das navigieren eventuell hilfreich ist.
jedenfalls war es auf meiner Seite so.

well you can insert them by css – just counting the menu-items:
f.e.:
on the left:

#av-custom-submenu-1 .menu-item:nth-child(3) a .avia-menu-text:before {
  content: "\e82b";
  font-family: entypo-fontello;
  display:  inline-block;
  position: relative;
  color: inherit;
  margin-right: 10px
}

on the right:

#av-custom-submenu-1 .menu-item:nth-child(2) a .avia-menu-text:after {
  content: "\e82b";
  font-family: entypo-fontello;
  display:  inline-block;
  position: relative;
  color: inherit;
  margin-left: 10px;
}

in combination with the page id or a custom ID or class on the element is then unique for only that sub-menu

you can see that if there are more than 1 post inside a category – it works:
https://kunst-en-verhalen.rhijnhof.nl/pieta/

what makes me wonder is that on your posts with category: oorlogsslachtoffers (only 1) – there should be no post-navigation. ( Do you have in the page title that p-tag ?)
so maybe Ismael could help you with this inside your installation

PS : the setting on Enfold > Blog Layout > Single Post Navigation setting is not important if you use the filter from : above

With the help of this filter, you can even handle post-types differently.

if it is active again –
try:

.html_header_top #top #wrap_all .av_logo_right #header_main .logo {
  position: relative;
  left: 50%;
  right: auto;
  margin-left: unset;
  margin-right: unset;
  transform: translateX(-50%);
  width: auto;
}

you see i have centered the logo a little different – so if you find those margin-left and margin-right values in your code remove them.
i set it to unset to overwrite your settings.

a function like this to remove the image-sizes enfold likes to have:

function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}
add_action('init', 'remove_enfold_image_sizes');

i guess does only influence the calculation of newly uploaded images.
The former uploads are not influenced on that. So these sizes are still in your uploads folder. (have a look by ftp inspection if this is the fact)
the use of Force Regenerate Thumbnails – removes those already calculated image-sizes that are not registered.

btw: where does the p-tag come from : p.ondertitel
See DOM:

i’m participant as you are – so i do not see any private content area.

so you have to wait for mods here

#top .avia-tooltip.avia-tt {
  display: none !important;
}

i’m participant as you are – so i do not see any private content area.

on general layout – Maximum Container Width – this is the value i pull out in the snippet for the setting

$responsive_size = avia_get_option('responsive_size');

If you have there a 100% width set – then it wil be synchronized in the snippet too.
If that is the case – you have to use the other snippet with the “hard-coded” width and replace th 1310px with your 1400px now:

function grid_layout_notfull(){
?>
<script>
(function($){
	$('.av-layout-grid-container.grid-notfull' ).each(function() {
		var notfullID = $(this).attr('id');
		$(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
		$(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
	});
	$('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
	$('.grid-notfull').css({"max-width": "1400px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

btw.: https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Layout/avf_post_nav_settings.php

with this snippet you do not even need to set the enfold options on post-navigation.
You can set with that filter even to loop:

function my_avf_post_nav_settings( array $settings ){
  if( true === $settings['is_hierarchical'] ){
    $settings['skip_output'] = true;
    return $settings;
  } 
  // the post-types inside the array are allowed to have post-navigation
  if( ! in_array( $settings['type'], array( 'post', 'portfolio' ) ) ){ 
    $settings['skip_output'] = true;
    return $settings;
  }
  $settings['loop_post_nav'] = true;
  $settings['same_category'] = true;
  $settings['is_fullwidth'] = false;
  $settings['skip_output'] = false; 
  return $settings;
}
add_filter( 'avf_post_nav_settings', 'my_avf_post_nav_settings', 10, 1 );

btw. if you set this (is_hierarchical) condition to false – then even pages will have post-navigation

place your contact form inside a 1/1 container.
give a custom ID to that 1/1 container e.g. my-contactform
give a custom class to that 1/1 container mfp-hide
place a button on your site – with manual link : #my-contactform – and custom class: open-popup-link
(because custom class of the button goes to its wrapper the selector .open-popup-link a will work.

btw. in the meantime you do not need this callback .
if you place inside your child-theme functions.php :

add_filter( 'avf_default_lightbox_no_scroll', '__return_true' );

You’re talking about the grid row element, right?

Edit: sadly you did not post a link to your page – but your screenshot is clear enough – i found your site now.
Because it looks exactly the same when you set a grid-row by css to to be not full-width, I thought you had used this element.

____________

So – why don’t you put the portfolio grid inside a 1/1 Container
The Color-Section can have the one background-color – and the 1/1 Container a different one.

if you then do not want on top and bottom of the 1/1 Container the background-color of the Section just remove padding-top and padding-bottom of 50px.

a pure css solution is perhaps not possible.

i have my snippet for child-theme functions.php :

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('.av-layout-grid-container.grid-notfull' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

what you had to do: give a custom class to the grid-row element: grid-notfull
see: https://webers-testseite.de/grid-row-alb/

the difference between green color-section to following grid-row on my testpage comes from the standard padding of grid-cells of 30px

PS: the ID of the grid-row element goes to its wrapper as class.