Big Header on iPad and shrinking header

the break-point of main-menu and mobile-menu is set by enfold options to 768px(only Mobile) or 990px (tablets too)

sometimes (if logo should be greater than usual or to many first level navigation entries) it might be better to break earlier; the code i used for that is:

@media only screen and (max-width: 1280px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
}

but here i see that wrap_all is generally set to display relative: http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/ and if i view it right it is outside the media querry instruction:

#wrap_all {
position: relative !important;
}
@media only screen and (max-width: 1140px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
}

You have to play with that 1140px value another possibility is what Yigit says to reduce the padding left/right of the listpoints too

What kind of header did you choose there logo left menu right ? – and it has to shrink?

• This reply was modified 8 years, 3 months ago by Guenni007.

another hint if you set it to:

.av-main-nav > li > a > .avia-menu-text, .av-main-nav li#menu-item-search [data-av_icon]::before {
    bottom: -23%;
    position: relative;
}

the navigation is on the level of the two arrows of the logo – looks nice too

and if you like to have the logo (the yellow background full left)

#header #header_main .container {
    padding-right: 30px !important;
    max-width: 100% !important;
    width: 100% !important;
}
#advanced_menu_toggle {
    right: 30px;
    top: 70%;
}

machen wir mal deutsch weiter – ist auch für mich leichter:

hast du den link gesehen: http://webers-testseite.de/ikom
wie gesagt ich hatte es jetzt mit -23% so eingestellt, dass die Pfeile des Logos auf die Navigation zeigen
wenn Du da wieder -35% einträgst ist es bei 200px header der Boden (ich stelle es mal auf -35% zurück im Beispiel-Link).

Wenn du den Screen mal schmal machst, und das menu togglest, dann ist da auch das logo drin.

Damit mein Code oben greift, müsstest du allerdings erstmal das was du bisher versucht hast verwerfen. denn der Code oben reicht völlig aus, um auch das Shrinken mitzunehmen.

Der zeite Code ist nur dafür da, dass du links neben dem Logo nicht auch noch ein graues Feld hast.

#header #header_main .container {
    padding-right: 30px !important;
    max-width: 100% !important;
    width: 100% !important;
}
#advanced_menu_toggle {
    right: 30px;
    top: 70%;
}

• This reply was modified 8 years, 3 months ago by Guenni007.

wenn du nun die Navigation nicht so weit rechts haben willst, dann

#header #header_main .container {
    padding-right: 30px !important;
    max-width: 100% !important;
    width: 100% !important;
}
#advanced_menu_toggle {
    right: 30px;
    top: 70%;
}

das paddding-right mit 30px halt varieren und das mit dem Toggle ist damit das nicht so hüpft wenn es umspringt und in etwa auf der Höhe von der Navigation ist

muss gehen !

Du willst das der wegscrollt ?

wie gesagt das kleine script von Josue ermöglicht am ipad das shrinken. Also beim runterscrollen geht das auf die 80px oder so an höhe zurück.
Du kannst das auf meiner Seite sehen – scroll mal am Ipad : http://webers-testseite.de/ikom

Bei dem Anderen wüsste ich jetzt nicht adhoc eine lösung.

PS: wenn das im Content beim scrollen der gleiche Hintergrund kommt wie im Header – meinst du es sähe besser aus, wenn der Header einen kleinen Schattenwurf bekommt? sonst verschwinden die Übergänge so oder?

#header_main {
    box-shadow: 0 2px 5px #666;
}

• This reply was modified 8 years, 3 months ago by Guenni007.