I’m refreshing this old thread as I was trying to achieve the same result (ref: here)

@greenmarketers, if you edit the CET (e.g. by changing the label on a button), the change is not applied to CETs that have already been used on your pages.

This is what @stuwetueho and I want to achieve: I create a special component and use it on different pages. Then, after editing that “special component”, the changes are applied everywhere that special component was used.

The CET seems to work almost exactly like the ‘Templates’: when you use them in a pages, they are not linked to the original CET/Template anymore. Any further change will not be propagated.

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)

The problem this inserting it from media-library is – that inside the Original svg of Instagram a clipPath or mask is used. both – mask and clip-path are used via url and ID of that path. If there are more than one instance of the icon on the page – the ID is not unique anymore. And browser do not render them.
Enfold (as you can see in the DOM) on using Logo left – Menue below generates two navigations – the one is set to display: none on desktop and vice versa for responsive case ) svg two times in the DOM then clip-path won’t work.

I have never seen such a poorly made SVG intended for the web. The shape could have been filled using a direct gradient, but the folks at Meta apparently didn’t want that.

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.

a p-tag inside a span-tag ? try another span with a custom class.

i tested 2 spans – that will lead to different troubles – because the span.entry-image will be placed inside and not besides entry-title

you can use :
Henri Flu • <i>1912-1944</i><span class="ondertitel">Geliefd huisarts en oorlogsslachtoffer</span>
or
Henri Flu <i><br>1912-1944</i><span class="ondertitel">Geliefd huisarts en oorlogsslachtoffer</span>

then you can colorise the i by:

#top .avia-post-nav .entry-title > i {
  color: #ff0;
}
#top .avia-post-nav .entry-image img {
  width: 100%;
  height: 100%;
}

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.

see f.e. a test-page: https://webers-testseite.de/clippy-2/
( i set a custom ID to the sub-menu: submenu-with-icons )

#submenu-with-icons .menu-item a .avia-menu-text:before {
  font-family: entypo-fontello;
  display:   inline-block;
  position: relative;
  color: inherit;
  margin-right: 10px;
  line-height: inherit;
  font-size: 1.3rem;
  top: 2px;  /*** just a correction if font-size is bigger than text ***/
}

#submenu-with-icons .menu-item:nth-child(1) a .avia-menu-text:before { content: "\e82a"; }
#submenu-with-icons .menu-item:nth-child(2) a .avia-menu-text:before { content: "\e82b"; }

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.