on https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481879 it is the setting now.
change font-size to 36px or something else.

#top #wrap_all #av-burger-menu-ul li {
  font-size: 36px !important;
}

see: https://kriesi.at/support/topic/center-logo-with-burger-icon-on-right/#post-1481874

it does work on dev tools – so either it had to set something to !important or to have on a selector a higher specificity.

Try:

@media only screen and (max-width: 767px) {
  .responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .responsive #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 20px !important;
    width: unset !important;
  }
}

font-size is now on :

#top #wrap_all #av-burger-menu-ul li {
  font-size: 40px;
}

just change that value

the logo positioning with 37% on the left is not so advisable.

i would first make the header fixed even in between 768 and 989 px.
then make for the nav a determined width – f.e. 170px

#top .av-main-nav-wrap {
  float: right;
  position: relative;
  z-index: 3;
  padding: 0  !important;
  margin: 0 0 0 15px !important;
}

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

#top .av_header_transparency .phone-info, 
#top .av_header_transparency .social_bookmarks li a {
  color: #FFF !important;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
  border: none !important;
}

#top .main_menu {
  width: 170px
}

#top .logo {
  width: calc(100% - 170px);
  left: unset;
}

#top .logo img {
  left: 50%;
  transform: translateX(-50%)
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

@media only screen and (max-width: 767px) {
  #header .social_bookmarks {
    display: none !important;
  }
}

First have a look at the burger opened layout – this is realy nearby your example page – isn’t is?

now your columns – best would be if the section got a custom class that no other sliders are influenced :

look for testing purpose:

@media only screen and (max-width: 767px) {
  #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  #top .avia-content-slider-element-container .avia-content-slider-inner .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 20px !important;
  }
}

this is the rule that is set :

.av-burger-overlay-bg {
  z-index: 3;
  opacity: 0.9;
  background: #000;
  display: block;
  position: fixed;
}

so play here with opacity or background-color – for quick css add #top to the selector for more selectivity:

#top .av-burger-overlay-bg {
  opacity: 0.7;
  background: #000;
}

sorry i thought you like to have that look of your example page.
So maybe you try :

#top .av-burger-overlay-bg {
  z-index: 3;
  opacity: 1;
  background-image: url(https://sonoranwaters.armourcloud.io/wp-content/uploads/2025/04/Custom-Pool-Designer-and-Builder-in-Scottsdale-Sonoran-Waters-3-1.jpg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: block;
  position: fixed;
}

#top .av-burger-overlay-inner {
  z-index: 3;
  opacity: 1;
  background-image: url(https://sonoranwaters.armourcloud.io/wp-content/uploads/2025/04/Sonoran-Waters-Logo_LONG.png);
  background-repeat: no-repeat;
  background-size: 450px;
  background-position: center top;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px)
}

you header settings and logo behaviour should be corrected generally.
Overlapping with burger icon etc. – that is something we can do for burger overlay then too.

and maybe this is nicer on transparency headers:

#top .av-main-nav-wrap {
  float: right;
  position: relative;
  z-index: 3;
  padding: 0  !important;
  margin: 0 0 0 15px !important;
}

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

#top .av_header_transparency .phone-info, 
#top .av_header_transparency .social_bookmarks li a {
  color: #FFF;
}

#top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
  border: none !important;
}

find those entries in your css and korrekt them by:

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 70px !important;
  }
}

@media only screen and (max-width: 767px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
    padding-top: 30px !important;
  }
}

The admin bar sometimes interferes with the setting of the frontend css.
have a look to this privacy page : https://webers-web.info/datenschutz/
if you scroll you see that the headings will be sticky til the next heading goes to top. if on that page the admin bar is present – the sticky moment seems to be wrong. – because those 50px are not concidered.
You can test it:
Go to your profile and turn off the “Show admin bar” to see that it has nothing to do with logging in and out.
This is something that normal users won’t see anyway.