There is a lot more to think of.
First – to style the header_meta with your phone-info entries.
To prevent breaks occurring where it looks unsightly, it would be a good idea to replace your entries completely with this line:

<a style="white-space: nowrap" href="/over-ons/">Over Ons</a><a style="white-space: nowrap" href="/veelgestelde-vragen/">Veel gestelde vragen</a><a style="white-space: nowrap" href="#">Nieuws</a><a style="white-space: nowrap" href="tel:+31434551268">T: +31 (0)43 455 12 68</a>

after that we will see if the pipes are neccessary.

On mobile devices, these links become two lines—and this must also be taken into account with the padding-top of main.

After you have these new phone-info – remove your code from above and try:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 110px !important;
  }

  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #header_main {
    border-bottom: none;
  }

  #header:not(.av_header_transparency) #header_main {
    box-shadow: 0 5px 10px #eee;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }

  .responsive #top #avia-menu > .menu-item-avia-special > a {
    height: 80px !important;  ;
    line-height: 80px !important; 
  }

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #FFF !important;
  }  

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #FFF;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
}

@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet #top #main {
    padding-top: 140px !important;
  }
}

@media only screen and (max-width: 435px) {
  #header {
    position: fixed !important;
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 
/****** End *************/

/******  styling the phone-info links  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 0 30px;
}

And you don’t like to make it public? Perhaps other participants could also benefit from this.
Is it nearby my approach on: https://kriesi.at/support/topic/restricted-product-displaying-in-search-results/#post-1491770

My guess is that WP Rocket is interfering again. I can’t see the font (or the arrows) with your code either, Ismael.

try to insert mine for testing.

the section is set to alternate_color and this is in your system set to :
.alternate_color { color: var(–enfold-alternate-color-color) }
and this is on your setting #000

so this :

#top .av_inherit_color * {
  color: inherit;
}

will cause the font to be color: #000

i do not see where your code misses some settings:
f.e. where does this comes from?

#top .av_inherit_color * {
  color: inherit;
}

try in your quick css:

#top .av-large-testimonial-slider .avia-testimonial_inner {
    display: inline-table;
}

#top .av-large-testimonial-slider .avia-testimonial_inner * {
  color: #FFF;
}

#top .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
  color: #FFF;
  opacity: 1 !important;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
  fill: #FFF !important;
  opacity: 0.5;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon:hover svg:first-child {
  opacity: 1
}

Give your visitors a bit more time to read the testimonial – ( autorotation is to fast )

__________
btw:
you entered the custom class with a dot on Link
Enter it without
nevertheless it is added correctly to avia-testimonial-wrapper

Hi,

I’m trying to do the same thing, but when I add the new code, there are no longer icons before the email adddress and the phone number, which I would like. Here’s the code I added, using your suggestions above:

Enfold Theme Options > Header > Extra Elements > Phone Number Or Small Info Text:

(Email address hidden if logged out) “> (Email address hidden if logged out)
941-462-9082

Custom CSS:

/* Phone info */
.phone-info-top {
display:inline-block!important;
padding:4px 10px;
}

I would like the icons before the email (ue805) and phone (ue854) – and I would like them to be a different color than the text, like this site: https://www.coastlinetree.com/

How can I accomplish this?

Thank you so much!