Modify Header and Widgets

First of all – enfold got a very nice Documentation Page:
just search f.e.: https://kriesi.at/documentation/enfold/?s=header&numberposts=5&results_hide_fields=

you will find a lot of code to get custom header styling.

Then what hook to you used for making the header widget area?

my advice for you would be to have header: logo left – menu right – social media on top bar.
Maybe – if you got a lot of menu points a – Multiline menu
see link above – reduce the size of the screen to see what happens.

lets see what happens if you take a different hook for the header widget area:
on helper-main-menu.php there are hooks to have for that custom input.
there are different hooks in that file: one is “header_main” in the code there will be the line: do_action('ava_main_header');
there are f.e.: ava_main_header, ava_main_header_sidebar, ava_before_bottom_main_menu, ava_inside_main_menu, ava_after_main_menu
These are all on different places in the DOM
Now everything depends on where you hook in :lol

on my test page i take this code to functions.php of my child-theme:

add_action( 'ava_main_header', 'header_top_widget_area' );
function header_top_widget_area() {
  dynamic_sidebar( 'header-top' );
}

It will hook into ava_main_header and you only have to make a custom widget area called : header-top
( The naming is arbitrary, only has to be synchronized with the dynamic sidebar we registered on functions.php. )

Put in the newly made widget area you prefer – i take for it the textwidget.
Leave heading open and put in your phonenumber. on my test it is in text mode:
<h1>Phone: <a href="tel:+492289768293">+49 228 9768293</a></h1>

Put this to quick css:

#header_main .widget {
    padding: 10px 0 0;
}
#header_main .widget .textwidget {
    text-align: center;
}

By the way – get rid of the other hook you placed in functions.php to get your header widget area.
After that we will see what happens to your menu.

And maybe it will be better to take a h2 for it – because it is no good praxis to have more than one h1 each page.

i see that you are not working with a child theme – Every changings on functions.php of parent theme will be lost on next update.

Therefore, I generally always advise to use a child theme.
you can see here on that very good documentation page of enfold how to install :
https://kriesi.at/documentation/enfold/child-theme/
After uploading the child-theme folder with its files – and activation of the child – Enfold got some tools to import parent theme settings.

you have here a good instruction to enter code snippets to functions.php:
https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/

PS: The note on that instruction page is very well:
NOTE: Each function should have a unique name.

because sometimes mods here on board do alway use ava_custom_script() for their tips. But if a function has no unique name you will have ( on former wordpress versions a white screen of death ) error alert. Often it is just on that reason.

See here some info about header-widget areas:
https://kriesi.at/documentation/enfold/header/#customization