By the way – most modern browsers support the pseudo-state: focus-visible
This is a good way to design keyboard navigation – because the normal handling of events by hover or click is not affected.

sorry i did not read the whole text here on that topic; but if i see something with inline-svg : did you have any css rule managing the width or height of svg’s ?

__________________
so this might be offtopic – but that was one reason why some of my svg icons seems not to be in place

On former installations of mine – i use a snippet to convert all img tags that are svgs to inline svgs. those svg’s that do not have a width and height definition inside the svg code ( only viewport settings ) need an absolute width to be shown. Otherwise these svgs are listed as 0x0 dimension.
For those svgs i have set in my quick css a rule like:
#top #main svg {width: 1500px}
with those new svg icons we have on iconbox.css this rule:

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em;
  width:1em;
  margin-top:3px
}

so my setting for inline svgs is more selective – and wins the game!
to avoid that :

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em !important;
  width:1em !important;
  margin-top:3px
}

As i mentioned above – and Mike pointed out again – there are a lot of manual set linebreaks (<br>)
but if you like you can force a max width of the p-tags by font length units one of the modern one is ch (The width of the 0 character of the font in use) so – 110ch means nearly 110 characters. A more common font unit is em (The font size of the element, or its nearest parent container)

I would not recommend this procedure; I would probably rather limit the container itself there, but so that you can see that it also works via css:

#top .avia_textblock p {
  max-width: 110ch;
  word-wrap: break-word;
  margin: 0.85em auto 0;
}

can you show me the page – it is hard to find the right selectors without the example page.

try :

#top #searchform.av_disable_ajax_search  #searchsubmit {
  right: auto;
  left: 8%;
}

#top .cn-page-heading-container #searchform {
  background-color: #FFF;
}

#top .cn-page-heading-container #searchform > div {
  max-width: 320px;
  display: block;
  margin: 0 50px;
}

#top .cn-page-heading-container #searchform  #searchsubmit,
#top #avia-menu #searchsubmit,
#top #searchform #searchsubmit {
  right: 0px !important;
  left: auto;
}

and have a look to your search page itself – if this is o.k. for you too!
see : https://riseandshine.childrensnational.org/?s=web

well it is the same setting – but you placed on the other textblocks manual breaks:

see:
(click to enlarge the images)

and because of text-align: center – these phrases are not the full width:

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;
  }
}

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;
  }
}

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;
}

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.

have you installed an additional plugin to manage a menu styling or function?
There are two elements inside #header – that do not belong to enfold.
hide them ( or have a look what causes the insertion of those “menu” buttons )

#advanced_menu_toggle, 
#advanced_menu_hide {
  display: none;
}

Yesterday – on Easter Monday you (and also the participant in the linked post) posted a problem. Now – when does another company work on one of the most important holidays (holy days) there is?
In addition to this fact, you should also be aware that everyone else here is also entitled to support, so it may take some time for them to respond to your request. It’s only been one day since you reported a problem here. And I’m actually surprised that Rikard responded to your request so quickly.
Obviously, you must have had email contact with the team, because I don’t see any other support records from you.

So if there is a reference to disabling the plugins (temporarily), it is to isolate the problem and help you figure out what the cause might be. It is not intended to be a solution to the problem.
If there has ever been such a “bug” in an Enfold version ( f.e.: see fix on Version 6.0.2 – compatibility with WP 6.6 fix for block editor hiding ALB button in header), it has been fixed. So first of all, you should have a current version of the theme installed. If this is the case, it is wise to find out where the problem lies by first seeing if the problem persists without plugins enabled. If this is not the case, then activating the plugins one by one and seeing when the problem occurs will help you identify which plugin might be the cause. A lot of other users do not have that problem.

PS : I’m a participant like you, who just didn’t want to go back to sleep the day after Easter Monday.