Header Layout in mobile view needs help

Sorry – it was carnival here in the Rhineland (Germany) until yesterday, and that’s basically a public holiday week.

Next: it would be nice if you could disable merging in the Enfold settings until all your goals are met. It’s hard to review and give advice without using devtools.

Do you / your customer realy want that narrow content width vor desktop view?
It’s hard enough to reconcile this, but with such a narrow content area, as you’ve noticed yourself, very long menu items quickly become two-liners.

there are older css rules inside that are not needed – so i could not find where f.e. the after pseudo-container of the hamburger is gone.

this is what it seems to get your style:

#top #header #header_main .container.av-logo-container .inner-container > * {
  align-self: center
}

.html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 300px !important;
}

@media only screen and (max-width: 989px) {
  .responsive #top #header #header_main .container.av-logo-container .inner-container {
    height: inherit;
    position: relative !important;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
  }
  
  .responsive #top #header #header_main .inner-container .logo {
    flex: 1 1 100% !important;
    order: 3;
    max-width: 100%;
    height: unset !important;
  }
  
  .responsive #top #header #header_main .inner-container .logo a {
    align-self: flex-start
  }
  
  .responsive #top #header #header_main .inner-container .main_menu,
  .responsive #top #header #header_main .inner-container .widget {
    flex: 1 1 48%;
    height: 120px !important;
    align-items: center
  }
  
  .responsive #top #header #header_main .inner-container .main_menu {
    order: 2;
  }
  
  .responsive #top #header #header_main .inner-container .widget {
    order: 1;
  }
  
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 350px !important;
  }
  #top #header #header_main .container.av-logo-container .inner-container .logo a img {
    max-height: 200px;
  }
}

container width is all up to you / your customer – but i just asked if this is what he likes to have.
You should clarify this somehow before you have then to rewrite a whole series of css rules.

PS : please refresh after merging switch off the cache. On performance – “Delete Old CSS And JS Files?”

btw: https://kriesi.at/support/topic/burger-menu-12/
Why? – Look at opened burger menue.

maybe this is better instead:
(remove that display none for burger after container and add this rule instead)

.responsive:not(.av-burger-overlay-active) .av-hamburger-inner:after {
  display: none; 
}

Ok have changed the code for the burger menu.. It also works. The client wants 2 lines. was not able to talk hi out of it. He insists he likes it better with 2 lines.

yes – but on the opened hamburger with the original css rule the hamburger only get one line (looks like a slash)
with my code the burger got on closed burger menu 2lines and on opened burger too.

you did not change the burger setting – it is still one line on opened burger menue.

enter on your quick css now the rules of: https://kriesi.at/support/topic/header-layout-in-mobile-view-needs-help/#post-1478652

ich glaube nicht, das es mit einem shrinking header leicht zu realisieren sein wird. Man stößt auch mit dem flex layout an Grenzen.
Daher habe ich mal hier eine Seite erstellt, die ein grid layout nutzt. ( Viele der Einstellungen überschreiben die in dieser Installation mit einem shrinking header standard Einstellungen. Wenn du in den Optionen direkt das Shrinking abstellst, dann sind einige der Einstellungen überflüssig)
____

I don’t think it’s going to be easy to do with a shrinking header. Even with the Flex layout there are limits.
So here is a page that uses a grid layout. (Many of the settings will overwrite the default settings in this installation with a shrinking header. If you disable shrinking directly in the options, some of the settings will be superfluous)

https://enfold.webers-webdesign.de/grid-header/

Du kannst hier sehen, wie es dann responsive gesetzt wird ( fr = fraction)
You can see here how it is then set responsive ( fr = fraction)

if you like – please send me your login data for that site via e-mail.
All data you can get via Profile link