Problem with adding a widget area to the header

I want to add a widget to the header of a site using the Enfold Theme. However, I followed your documentation and added the code to the function.php page, and the Quick CSS code (see below). Unfortunately, the format for the menu is now out of whack (with the menu list in very small type and the the item run over one another.)

The code I put in the function.php file was the one used if the menu is below the header.

Can you help me fix this problem?

Here is what I put in the function.php line:
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}

Here is what I put in the Quick CSS
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

kfranck