yes try it – or what kind of files are in your zip file. if there are one svg or for each icon a single svg – you can upload these svgs by drag & drop to fontello and download the importable zip file from there !

and where is the benefit to have here a enfold button ?
see again example – it is so easy to construct buttons on layerslider with text layers ?
https://webers-testseite.de/kingfilly/

please tell me where you have inserted that “Button-Shortcode”
you got Image / Text / HTML / Video-Audio / Dynamic content from posts
there is no opportunity to use here enfold shortcodes – so for me it is a mystery – why there is on your video a button ?

i see you used for it the html option but a generated code from enfold entered here never works on my end here ???

hm – you have to place the buttons on each slide.

But i don’t know where you inserted that shortcode. I constructed buttons on layerslider !

see here: https://webers-testseite.de/kingfilly/

click to enlarge:

and:

and if you are a bit paranoid : add this to functions.php / child-theme

// Redirect any user trying to access comments page
function df_disable_comments_admin_menu_redirect() {
	global $pagenow;
	if ($pagenow === 'edit-comments.php') {
		wp_redirect(admin_url()); exit;
	}
}
add_action('admin_init', 'df_disable_comments_admin_menu_redirect');

or use: https://de.wordpress.org/plugins/disable-comments/

or a radikal method via functions.php of your child-theme:
(the comments on that code shows you what is done by the code)

please try this here :

// Disable support for comments and trackbacks in post types
function df_disable_comments_post_types_support() {
	$post_types = get_post_types();
	foreach ($post_types as $post_type) {
		if(post_type_supports($post_type, 'comments')) {
			remove_post_type_support($post_type, 'comments');
			remove_post_type_support($post_type, 'trackbacks');
		}
	}
}
add_action('admin_init', 'df_disable_comments_post_types_support');

// Close comments on the front-end
function df_disable_comments_status() {
	return false;
}
add_filter('comments_open', 'df_disable_comments_status', 20, 2);
add_filter('pings_open', 'df_disable_comments_status', 20, 2);

// Hide existing comments
function df_disable_comments_hide_existing_comments($comments) {
	$comments = array();
	return $comments;
}
add_filter('comments_array', 'df_disable_comments_hide_existing_comments', 10, 2);

to quick css

.comment-entry {
    display: none;
}

on layerslider you got the slider settings tab !

you see the “launsch pop up fields”. ?
there is the input field “open by click”. Put in a unique class or ID ( i prefer the class because most elements – including buttons on Enfold got the possibility to have classes !)
and leave the rest empty (open after seconds, or open on scroll position etc)

Go to your page and place your button ( as link target manual and #).

on my end i do not have the success to set it in Enfold on opening on all pages / posts etc. i have to place the shortcode of the popup-layerslider on the specific page as codeblock

do you have your new logo in a vectorbased way (Illustrator, eps,). – or find the correct name of the new logo font with round dots – i will recreate your logo. Recreating via those tiny screenshots is nearly impossible.
The segoe font does not fit totaly because the dots are not perfect circles on bold font-weight.

or you misuse the method to add text to the logo and add the following to your functions.php of your child-theme:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= " <a href= 'the link target url'> <img class='anything'  title='anything'   src='link to your image'    alt='anything you like' /></a>  ";
  return $sub;
}

add this to quick css :

.logo a {
    float: left;
}

but pay attention with single and double quotation marks ! – and if you like to open the link of that second logo on a blank page :

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= " <a href= 'the link target url'  target='_blank' > <img class='anything'  title='anything'   src='link to your image'    alt='anything you like' /></a>  ";
  return $sub;
}

the benefit is – that even shrinking is possible – because it is in the logo container and makes everything the normal logo does.

see here https://webers-testseite.de/

for small screens you can make some media queries on how to handle the thing – maybe you go to display: none or something else

the Grid-Row itself got a height option – but not to loose the empty 1/2 (and your background-image you can insert a whitespace separator with a given height

see: https://webers-testseite.de/kingfilly/

Nicht dafür –
i removed all images of your blog from mine

see my solution : https://webers-testseite.de/

– but with your Text “Zen Meditation” as logo-title and the other is the logo-subtitle.

There are a lot of possibilities to not have the overlapping.
but as i said without a real page only with screenshots it is not possible. this is my code :

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  $sub .= "<span class='logo-title logo-subtitle'>";
  $sub .= get_bloginfo( 'description', 'display' );
  $sub .= "</span>";
  return $sub;
}

so you only have to input via customizer the WordPress site name and the wordpress sloagan. These are then the headings

css for quick.css ( in case the logo is at 120px height):

.logo img{float: left}
#top .logo, #top .logo a {overflow: visible }
#top .subtext {float: left; position: relative}

#top .logo-title {
transition: opacity 0.4s ease-out 0s;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
    color: #306066;
    font-size: 40px;
    font-family: "Caveat" !important;
    font-weight: bold !important;
    left: 7px;
    opacity: 1;
    position: absolute;
    top: -12px;
    white-space: nowrap;
}

#top .logo-subtitle {
    color: #888 !important;
    font-family: "Caveat" !important;
    font-size: 24px !important;
    left: 10px;
    top: 18px !important;
    font-weight: normal;
}

/** get rid of that if you don't like to get rid of logo headings by scrolling - Kriesi Solution  */
#top .header-scrolled .logo-title {opacity: 0; filter: alpha(opacity=0)}

and to get rid of text on very small screens:

@media only screen and (max-width: 520px){
#top .logo-title {opacity: 0; filter: alpha(opacity=0)}
}

Um die Menu-Schrift zu beeinflussen ( du kannst ja auch das padding was verändern) :

hier mit einem sogenannten Media Query bei einer Screenweite zwischen 768 und 990 :
btw. ich schreibe diese Media-Queries meist ans Ende meiner Quick css

@media only screen and (min-width: 768px) and (max-width: 989px){
.av-main-nav > li > a {
    font-size: 12px;
    font-weight: 400;
    padding: 0 10px
    }
}

this logo is formerly crying for a svg usage.
The font seems to be something like segoe bold (frutiger with i dots : lol )
And that little Dot in Front is very simple to construct on f.e. Illustrator.

By the way what is the font name

but by the way – the unsharpness is not caused by less sharpness of the png or jpg – it is a question of screen-abilities. If you are looking to it on my screen 2560×1440 (27′ Mac Screen) or on a retina (ipads etc) your logo on small case isn’t so bad.
Even a svg (by definition sharp) is on that minified Version not sharp on the screen – the resolution does not fit that.

have a look to : https://webers-testseite.de/wp-content/uploads/stillAds.svg
and shrink your browser window. A minimum height of 50px seem to be ok.

one thing among others is that you have to set the overflow visible rule for logo – because otherwise it may be in the correct position but it is not seen:

#top .logo, #top .logo a {
    overflow: visible;
}

the rest is positioning of the subtext. So it might be good to have the real sitze of you to give you an advice