before you change anything – make a backup of the status quo of your page ( a good plugin even in free version is : duplicator

Especially if it is a major update (5.x to 6.x; …), I would advise everyone to follow this way. You always have a rollback in the background.

The advantage of this procedure is that it can be undone.
Uploading the new theme takes a little time; if all goes well, the site will only be offline for a short time (just for the moment of renaming).
Update via ftp

• Download the “installable WordPress file only” file from themeforest (envato)   and unzip it
• After that – you got a folder : enfold
• Rename this downloaded newest version to enfold-new
• via ftp: Upload that enfold-new folder to the themes folder
• via ftp: Rename the existing enfold folder to f.e. enfold-old
• via ftp: Rename your uploaded enfold-new folder now to enfold
• On Enfold – Performance – check mark and “Delete Old CSS And JS Files?”
• Check if your Website works to your full satisfaction.
• Yes – then stop here – Update is finished
• After a while of testing – you can delete that enfold-old folder via ftp

• No – delete or rename back the enfold folder back to enfold-new
• rename the enfold-old folder back to enfold
• check on enfold board if there are known bugs – or similar problems

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.