At the very least, it would be good to know your header settings (logo left, menu below, etc.). For example, when I work on the new version with (logo left, menu right), the social bookmarks are located within main_menu. When I look at the board at the top here, they are located next to main_menu. – That depends on where I place the flex container.

so it all depends on your setting . so it will be the best to see the concerning site.

f.e. if you got a setting that the burger is visible from the beginning – like in freelancer demo

then you had to remove the media-query setting for screens above 768px.

btw. your code sometimes leads to show the social icons twice. Because the example of medical demo has the navigation below the logo container.
Then we have those social icons twice in the DOM

Therefore (menu below the logo) , it is better to define your code as follows:
( for those settings where the social bookmarks are not visible below 767 you had to adjust that code)

@media only screen and (max-width: 479px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block;
  }
}

try

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all .main_menu {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: flex-start;
    height: 100% !important;
  }
  #top #wrap_all .social_bookmarks {
    padding-right: 20px;
    border-right: 1px solid var(--enfold-header-color-meta);
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top .avia-menu.av_menu_icon_beside {
    border: none;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header .main_menu > .social_bookmarks {
    display: block !important;
    top: 40px
  }
  .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    align-items: flex-start;
  }
  .responsive #top .av_seperator_big_border .avia-menu.av_menu_icon_beside {
    padding-right: 0;
    margin-right: 0;
    border: none;
  }
}

and check please the style on screens less than 767px if that fits for you. on medical demo it works well.

So you uploaded your own symbols to Fontello? You didn’t enter a name for the font at the top of the Fontello page. That’s the one way to get the font name fontello.

Can you insert the icon as symbol if you place an element ( icon ) to a page?

Have you choosen that icon on Enfold Options – Social Profiles : at the end of that dropdown list your new entry?

next – i do not know it you can choose every string on that – because these settings will end in a class e.g. (social_bookmarks_tripadvisor and av-social-link-tripadvisor) if you got a space inside $icons[‘tripadvisor’] it might be broken. ( you can have Tripadvisor)
( the display_name is the Name that is shown on hovering that icon )

try:

function avia_add_custom_icon($icons) {
  $icons['tripadvisor']  = array( 'font' =>'fontello', 'icon' => 'uf262', 'display_name' => 'Trip Advisor');
  return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
  $icons['tripadvisor'] = 'tripadvisor';
  return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

here are some rulesets that belong to your question.

#top #header_main_alternate,
#top #header .av-main-nav > li > a {
  background-color: #aaa;
}

#top #header .av-main-nav > li > a,
top #wrap_all #header #menu-item-search > a{
  border-color: #fff  !important;
}

#top #header .av-main-nav > li > a .avia-menu-text {
  color: #333
}

#top #menu-item-search a.avia-svg-icon svg {
  z-index: 1;
  fill: #333 !important;
}

_____________
btw. dear mods : why is the search icon set to z-index: -1 on header_main_alternate on default ?

your rule:

#top .avia-buttonrow-wrap a {
  max-width: 50% !important;
  font-weight: 500!important;
}

the selector is more specific because it has one ID that counts much more than classes.
thats the reason why the selector : .avia-buttonrow-wrap a does not win the race ;)

so try:

#top .textcloud .avia-button {
  text-align:left!important;
  font-weight:500!important;
}

#top .avia-buttonrow-wrap a {
  max-width: 50% !important;
  font-weight: 500!important;
}
@media only screen and (max-width: 767px) {
  #top .avia-buttonrow-wrap a {
    max-width: 100% !important;
  }
}

https://specificity.keegan.st/

I would probably do things differently, especially when it comes to responsive layouts.
The grid box layout has several advantages, especially if you want the containers to be in different positions than in the DOM.
In this case, I would define the individual elements as special grid areas. You can choose the names of the areas freely, but some names are obvious choices.

The whole thing would then possibly respond as follows (however, this can also be customized to your requirements):

(click to enlarge)

The best thing would definitely be to remove the settings that are already set from your CSS, but for testing purposes, I think it will also work if you add this CSS to the end of your quick CSS.

i would change the settings for your widget divs to:

/* and change these values */
.phone {
  background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/phone-icon.png);
  background-repeat: no-repeat;
  background-position: left 4px;
  padding-left: 30px;
  padding-top: 0;
  font-size: 24px;
  color: #fff;
  overflow: visible !important;
  line-height: 30px;
}

.headlogos {
  background-image: url(https://peter-test1.co.uk/wp-content/uploads/2025/09/bda-hcpc-logos.png);
  background-repeat: no-repeat;
  display: block;
  width: 269px;
  height: 54px;
  background-position: center left;
  Float: left;
}

and grid-layout settings:

#top #header #header_main .container.av-logo-container .inner-container {
  display: grid !important;
  gap: 10px;
  grid-auto-flow: row;
  grid-template-columns: 210px 1fr;
  grid-template-areas: 
    "logo widget"
    "logo menu";
}

#top #header #header_main .container.av-logo-container .logo {
  grid-area: logo;
}

#top #header #header_main .container.av-logo-container .main_menu {
  grid-area: menu;
}

#top #header #header_main .container.av-logo-container .widget {
  grid-area: widget;
  justify-self: end;
}

.header_color .av-hamburger-inner, 
.header_color .av-hamburger-inner::before, 
.header_color .av-hamburger-inner::after {
  background-color: #FFF;
}

#top #header #header_main .container.av-logo-container .widget:before,
#top #header #header_main .container.av-logo-container .widget:after {
  display: none;
}

@media only screen and (max-width: 1000px) {
  #top #header #header_main .container.av-logo-container .main_menu {
    justify-self: center
  }
}

@media only screen and (max-width: 889px) {
  .responsive #top #wrap_all .container {
    width: 95%;
    max-width: 95%;
  }
  #top #header #header_main .container.av-logo-container .inner-container {
    display: grid !important;
    gap: 10px;
    grid-auto-flow: row;
    grid-template-columns: 1fr 80px;
    justify-content: space-between;
    grid-template-areas: 
      "logo menu"
      "widget widget";
  }
  #top #header #header_main .container.av-logo-container .widget {
    justify-self: auto;
  }

  #top .topcontainer {
    display: flex;
    gap: 20px;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

@media only screen and (max-width: 605px) {
  #top .topcontainer {
    justify-content: center;
  }
}