Custom Menu-bar Shape – Part 2

on your mockup it looks to me if the logo only moves down ( lower than the navigation)
now i looked better to that image – so you have a header with unchecked setting of : “Let Logo And Menu Position Adapt To Browser Window”

because i do not see your page – you know better your setting for container width – on my test page it is 1510px

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

@media only screen and (max-width: 1509px) {
  .logo.avia-svg-logo svg {
    left: 0px;
    right: auto;
  }
}

btw: – see again test page and code for header_bg – i set in calculated height for it – because this is better to understand how it works. https://webers-testseite.de/tribal/

maybe there had to be adjustments for responsive case in addition.

PS : i think you can have a png as masking image too
https://www.w3schools.com/css/css3_masking.asp

Unfortunately, I cannot inspect the page in question. I think I could also help with your query: Link . But without the page it’s just a guess what it might look like. Maybe the link to masking images will help you.

with your logo this might work.

remove that one rule :

.logo.avia-svg-logo svg {
  height: 220px;
  max-height: 175% !important;
  overflow: visible;
  top: 10px;
  left: calc((1510px/2) - 50vw);
  right: auto;
}

and insert instead:

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

.logo.avia-svg-logo svg {
  height: 150px;
  max-height: 200% !important;
  overflow: visible;
  overflow: visible;
  left: -30px !important;
  top: 5px !important;
}

to see my converted svg – look: https://webers-testseite.de/tribal/
Advantage – you can influence inside the svg by external events

ok – dann geht es ja auch in deutsch.
Durch die optische Erhöhung des Headers ( du hast 100px eingestellt ) stimmt jetzt das padding-top von #main nicht mehr.
Um es wieder auf die korrekte Distanz zu bringen, kann man die neue Variable (–enfold-header-height) nutzen.

Leider kommt dann eine Farbe zum Vorschein, die über das hier gesetzt wurde (rhein_designer.css) :
bitte entfernen, oder eben die Farbe neu definieren – siehe unten

#main,
.avia-msie-8 .av_header_sticky_disabled#header {
  background-color:var(--enfold-header-color-bg); 
}

auch dein Hamburger Background sieht so aus. – schau mal ob es in den Enfold Optionen gesetzt wurde.

.html_header_top.html_header_sticky #top #main {
  padding-top: calc(var(--enfold-header-height) + 100px) !important;
  background-color: #FFF;
}

@media only screen and (max-width: 767px) {
  .html_header_top.html_header_sticky #top #main {
    padding-top: 100px !important;
  }
  
  .logo.avia-svg-logo svg {
    top: 15px !important;
  }
}

.html_header_top.html_header_sticky #top.page-id-28 #main {
  background-color: #b3daa2;
}

#top .container_wrap {
  border: none !important;
}

OK – bis bald dann