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.

hast du darauf geachtet welche Größe des vorhandenen Bildes du einsetzt?

As I said, as a participant I cannot see your private message area, so I cannot see a link if it has been posted. The link would be necessary for verification – because a screenshot is not meaningful enough to give advice.

if that is your css – the

@media only screen and (max-width: 768px) {

is nested with a nother media query.
your :

    @media only screen and (max-width:767px) {
        .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
            padding-left: 0;
        }
    }

is inside another media query ( with the same settings )

next hint: use for the max-width media query the odd setting – and for min-width the even ones.

I don’t know if the above leads to conflicts, but put this as code instead:

@media only screen and (max-width: 767px) {
    /* Add your Mobile Styles here */
    .responsive #header_main_alternate {
        display: block;
    }

    .responsive #top #header .main_menu {
        width: auto !important;
    }

    #header_meta .phone-info-custom::before {
        background-color: #ffffff !important;
    }
    .responsive #top #wrap_all .main_menu {
        left: 0px !important;
    }
    .responsive #top .logo {
        width: 50% !important;
    }

    .responsive #top #wrap_all .container {
        float: right !important;
    }

    #header_meta .phone-info-custom {
        font-size: 15px;
        font-weight: 800;
        color: #000000;
        padding-top: 70px;
    }
    #header_meta .container {
        max-width: 50% ;
        margin-left: 0px;
        margin-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    /*PHONE INFO*/
    #header_meta .phone-info-custom::before {
        display: none !important;
    }
    .phone-info {
        padding-top: 5px !important;
    }

    /*LOGO*/
    .responsive .logo img {
        float: right !important;
    }

    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px!important;
        float: none;
        padding: 0;
        border: none;
        width: 95%;
    }
    .main_menu {
        margin-left: 0px !important;
    }
    a {
        padding-left: 0px !important;
    }

    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
        padding-left: 0;
    }
}

/* 💻 TABLETTE (entre 769px et 1024px) */
@media only screen and (min-width:768px) and (max-width:989px) {
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
        left: 0 !important;
    }
}

first question: under Dashboard – Settings – Reading -? Is there a mark on that checkmark?
it had to be not checked.

Next note: You are already aware that it can take a while for a SEO bot to scan your site.
You can trigger it manually in the Google Search Console ( Link ) , it would be good to upload a stored sitemap beforehand.

Hint: have a look if you got a robots.txt on your site root directory.
(Edit: your robots.txt is o.k. 200 allowed)

And: have a look if you have all properties registered on Google Search Console
( by the way – your url is https://springen-conseil.fr/)

It would be best if we could take a look at the site in question. If you can’t post the link, you’ll have to wait for the mods to look at it.
Reason: Basically it depends on what your logo looks like and what header layout you have chosen.

try :

#top .av-woo-purchase-button .product_meta {
  display: none;
}

see here a working example: https://webers-testseite.de/mie2/
these are three color-section ( with small padding )
if you do not like to have it full-width just remove that rule:

#top .avia-section.grid-layout .container {
  max-width: 100%;
  /*! padding: 0; */
}

for me the responsive alternative is nicer. you see how it works – the width of the columns is globaly set to : unset – so 1/3 is not working here – the grid-template-columns determines the width now.
On that alternative responsive behaviour – we got two columns then – first with 1part (fraction) the second column with 2parts.
As on former table layout we can make a “colspan” if we fill those grid-cells this way:

grid-template-areas: 
      "feld2 feld1" 
      "feld3 feld3";

it is like this on former table layout:

<table>
	<tbody>
		<tr>
			<td>feld2</td>
			<td>feld1</td>
		</tr>
		<tr>
			<td colspan="2">feld3</td>
		</tr>
	</tbody>
</table>

but now you can have a very flexible layout with responsive options
PS: The advantage of a layout like this is that it can be styled with media queries. Try it with tables (this is a remnant from the old days)

i would have made it with images inside the columns – and use the caption setting to have text over the image. In this case there will be an automatic overlay – – on image styling tab then you can set the options for that overly:

see here an example page: https://webers-testseite.de/adamad/

i use for it a color-section with custom class: slanted-background – let the content determine the height.
this color-section contains the columns and is set with a svg-divider ( tilt ) – bring it back and maybe flip.

the next color-section got the same color as the svg-divider

then :

#top .slanted-background .avia-divider-svg-tilt.avia-divider-svg-bottom,
#top .slanted-background .avia-divider-svg-tilt.avia-divider-svg-bottom svg {
  height: 75% !important;
}
#top .slanted-background .flex_column img {
  box-shadow: 5px 5px 10px -3px #333;
}

You can use the height setting (here 75%) to determine the degree of incline.