Ismael’s suggestions work, of course, but they no longer have anything to do with Instagram’s corporate design.

Link: https://www.meta.com/brand/resources/instagram/instagram-brand/

But if you’re not too particular about the colors, you can also use the codes above.

to have the title you only have to make it visible by:

#top .av-burger-menu-main .avia_hidden_link_text {
  display: inline;
  font-size: 20px;
  line-height: 0;
  color: var(--enfold-header-color-meta);
  margin-left: 5px !important;
  position: relative;
  top: 2px; /*=== just to center horizontally - adjust to your needs ===*/
}

but for your header layout “Hamburger menu icon left, logo centered, search icon right” i would start from a different header layout – not the header centered – menü below .

btw. some topics under yours there is the same title of the topic “Hamburger menu icon left, logo centered, search icon right”

so because – the original insta logo is to complex to insert it as svg file to the social media icons.
I would place the normal instagram icon via font-icon !
and replace that by css .

maybe you upload two versions of that logo:

and for hover style:

then to quick css:

#top #wrap_all .av-social-link-instagram a:focus, 
#top #wrap_all .av-social-link-instagram:hover a {
  color: unset;
  background-color: unset;
}

.social_bookmarks_instagram a {
  font-size:0 !important
}

.social_bookmarks_instagram a:before {
  content:"";
  background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient.png);
  background-size:contain;
  display:inline-block;
  width:inherit;
  height:inherit;
  border-radius: 10px;
  background-position:center center;
}

.social_bookmarks_instagram:hover a:before {
  background-image:url(/wp-content/uploads/Instagram_Glyph_Gradient_invers.png);
  border-radius: 10px
}

see (the first in the row) https://basis.webers-testseite.de/
the second icon on the right is the svg icon (with its trouble to use the mask (or clipPath)

Guess you had to know the exact post-type of your CPT
f.e. tribe_events or event etc. pp.

then you can register this post-type for the advanced layout builder:

function avf_alb_supported_post_types_mod( array $supported_post_types ) {
  $supported_post_types[] = 'tribe_events';
  return $supported_post_types;
}
add_filter('avf_alb_supported_post_types', 'avf_alb_supported_post_types_mod', 10, 1);

can you try that first.

maybe this is an option too:

function enable_boxes_on_elements($boxes) {
$boxes[] = array( 'title' =>__('Avia Layout Builder','avia_framework' ), 'id'=>'avia_builder', 'page'=>array('page', 'post', 'portfolio', 'alb_custom_layout'), 'context'=>'normal', 'expandable'=>true );
$boxes[] = array( 'title' =>__('Layout','avia_framework' ), 'id'=>'layout', 'page'=>array('page', 'post', 'portfolio', 'alb_custom_layout'), 'context'=>'side', 'priority'=>'low');
    return $boxes;
}
add_filter('avf_builder_boxes','enable_boxes_on_elements');

change the alb_custom_layout to your post-type you like to add.

Some thoughts for DEV in private Content.
The most perfect method would certainly be to upload the original SVG offered by Instagram (Meta) to the media library. However, this is not possible due to its size. I have recalculated it to normal sizes for such icons. So now it is only 20 KB in size, instead of 11 MB. Unfortunately, the graphic implementation of the original is complex.
see here my svg file:

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;
}