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

Might be a problem with understanding :

The default installation folder of enfold is: enfold
Do you like to update by uploading to a new folder called EnfoldNew ?
On manual update you completely replace the enfold folder by the new one.

and by the way you can replace the text inside your button on click:

In my case on the testpage it is “contact me” to replace

function add_custom_toggler(){
?>
<script>
jQuery(window).load(function () {
  jQuery("#toggle-color-section").addClass("notseen");
  jQuery(".avia-button-wrap.color-section-toggler").click(function () {
   jQuery("#toggle-color-section").toggleClass("notseen");

   jQuery(".avia-button-wrap.color-section-toggler span.avia_iconbox_title").text(function(i, v){
           return v === "contact me" ? "thanks for your interest" : "contact me"
   })	  
  });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_toggler');

etc. pp

it seem to be a matter of full-width button but i can not see why – the thing is reproducable on my example site !

i changed it above try only #toggle-color-section as target of your button