Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #688572
    #688573

    Hey Jan!

    1- Can you please post the link to your website?

    2- Please refer to this post – http://kriesi.at/documentation/enfold/menu-overlaps-logo-on-tablets/ and if that does not help, please see – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Regards,
    Yigit

    #688577
    #688583

    PS: I activated the mobile menu for iPad landscape now, great! Can I also reduce the header only on iPad? it’s almost 25% of the screen? Or can I at least tell it to shrink?

    Thank you, I appreciate your help!!

    Jan :)

    #689548

    @yigit hey, could you please take another look at the menu? I can’t figure out the solution. :(

    Thank you so much!

    Jan

    #689660

    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 4 years, 6 months ago by  Guenni007.
    #689668

    what did you do to have the nav points on bottom ?

    i only did the following: logo left menu right – shrinking header: and

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

    thats enough – but you have to get rid of the other settings you did til now:

    see here : Link

    btw: the shrinking header did not work on default on ipads : Solution see here from Josue
    you have to upload a js-file into your child-theme js folder and add a code snippet to child-theme functions.php

    Solution

    #689670

    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%;
    }
    #689691

    Hey Guenni,

    thank you, I appreciate your help very much! Unfortunately, none of these work.

    But I reduced the padding to the top for the navigation on desktops. The problem was, that I wanted the menu to be aligned bottom with the logo. But the shrinking header moves the navigation underneath the header in the animation before it flips back into the header once the shrinking has completed.

    And on iPad, the header is still too big. I can’t figure out how to reduce it. Do you have an idea?

    overlapping header on ipad

    Cheers,
    Jan

    #689694

    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 4 years, 6 months ago by  Guenni007.
    #689699

    Auf dem Ipad musst du dem Link oben folgen. Josue schrieb mir mal ein kleies Script, dass das Shrinken auf dem Ipad wieder möglich machte.
    Musst du in der functions.php des Child-Themes dann als custom script einfügen.

    #689700

    Hi Guenni! Oh, wow, hattes das mit deinen probiert. Aber vielleicht behindert noch ein Code von mir deine Ausführungen. SO isses nämlich perfekt. Auch mit dem Gelb links. Das wollte der Kunde von Anfang an.

    Könntest du mir nochmal schrieben, welchen Code ich genau für das Setup deiner Testseite einfügen müsste? Nur das mit dem Logo im Menü muss nicht sein. Ist aber ansonsten ein interessantes Feature.

    Sorry, bin jetzt etwas durcheinander und habe nur ganz grobe CSS Kenntnisse :-/

    Danke, du bist ja echt genial!!! :)

    Jan

    #689701

    nur diesen Code hier sehe ich in deinem CSS nicht (30% scheinen bei dir zu reichen):

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

    Super, habe ich ausgetauscht und mobile menu bei iPad Landscape drin.

    Jetzt müsste ich nur noch wissen, wie ich das Logo linksbündig mit nur Gelb hinbekomme!

    Haach, du bist mein Retter!!! Der Kunde drängelt schon :)

    #689703

    Ah, habe ich oben nun gesehen. Das hast du das ja explizit beschrieben! Danke

    #689704

    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

    #689705

    komischerweise klappt das nicht mit dem Logo linksbündig gelb. Ne Idee?

    #689707

    Ah, ich musste in den Theme Options noch den Header linksbündig aktivieren! Aaaahhrrg ;)

    #689708

    Jetzt ist es perfekt!! Danke @guenni007!!! :)) You made my day

    #689709

    muss gehen !

    #689710

    Noch ein Tipp? Wie deaktiviere ich den sticky header auf dem iPad? (hoch und querformat)

    Jan

    #689711

    Du willst das der wegscrollt ?

    #689712

    Jupp! Der nimmt sonst in diesem Fall (riesen Header) zu viel Platz ein beim runterscrollen.

    Wie auf dem Smartphone. Dort bleibt der Header ja auch nicht stehen, obwohl er das auf dem Desktop tut

    #689717

    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 4 years, 6 months ago by  Guenni007.
    #689725

    Vorteil zu dem bei der Script Lösung – du kannst auch gleich noch den Shrinking amount einstellen:
    Auf der Seite oben habe ich zB von Hälfte auf Drittel eingestellt.

    Wenn man diesen Shrink Amount nur bei kleinen Screens haben will kann man das via Css auch ermöglichen

    #689820

    Hi Guenni,

    danke. Aber ich habe jetzt folgenden Code gefunden, der sticky einfach auf dem iPad deaktiviert. Das reicht mir auch in diesem speziellen Fall:

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    .responsive #top #header {
    position: absolute !important;}}

    Tausend dank für deine grandiose Hilfe!!!! :)

    Jan

    #690590

    Hi,

    schön, dass ihr euch hier so toll gegenseitig unterstützt. Bei einer neuen Frage/Problem einfach ein neues Ticket aufmachen.

    Gruß,
    Andy

Viewing 27 posts - 1 through 27 (of 27 total)

The topic ‘Big Header on iPad and shrinking header’ is closed to new replies.