navbar mit href Safari Probleme

  • Guten Morgen, oder besser, Mahlzeit :-)


    Ich habe ein Problem bei meiner ersten Website. Ich habe eine Nav-Bar erstellt, die funktioniert auf IE, Chrome und auf Firefox. Nur der Safari macht Probleme, das habe ich aber erst nach dem Launch festgestellt. Ich konnte auf meinem Windows-Computer nur die anderen drei Browser testen. Auf dem iPhone habe ich es dann gemerkt... Könnt ihr mir hier helfen?


    html Ausschnitt:



    Das dazugehörige CSS:


    und für das Grid-System (ich arbeite nicht mit bootstrap, habe eigene Werte erstellt):



    Wo hat Safari hier ein Problem? Ist es, weil das Logo und der Hamburger in einer col sind und die sich deswegen überschneiden? Ich kann in den dev mode von Chrome aber auch nichts entdecken....


    Wäre für jede Hilfe dankbar...


    MfG


    Erik

  • Leider besitze ich kein iPhone und leider beschreibst Du nicht, was genau dort das Problem ist.

    Es könnte sein, dass das kein Problem vom Safari ist sondern einfach der Darstellung auf einem schmalen Bildschirm.

    Generell kann es eine Quelle von Problemen sein, wenn mit float gearbeitet wird statt mit Flex oder Grid.

  • Es wäre gut zu wissen, was du mit "nicht funktionieren" meinst.

    Außerdem wäre es hilfreich zu wissen, auf welcher iOS Safari Version du getestet hast.

    Und auf welchem iPhone Model du die Seite getestest hast.


    Ist die Seite öffentlich erreichbar? Wie ist denn die Adresse?

  • Sorry für die fehlenden Informationen... also ich habe es auf iPhone 11 Pro iOS 14.2 und iPhone SE iOS 14.2 getestet... beides der gleiche Fehler bzw. Verhalten.


    wenn ich auf den Hamburger klicke, öffnet sich das Geld nicht wo die Menü Punkte aufkommen, also die ul ist nicht auswählbar... ich vermute das funktioniert nicht:


    #mobile-nav-dropdown:hover > #mobile-nav-content {
    display: block;
    }

    Der content wird nicht aufgerufen...


    mit chrome auf den iPhones geht es, also gehe ich vom Safari aus, nicht auf Fehler vom Responsive Design.

  • Du öffnest das Menü durch hover, das gibt es auf einem Smartphone nicht. Viele Browserhersteller haben jedoch einen Workaround gemacht, in dem Sinne, dass die hover-Aktion durch Touch ausgelöst wird, deshalb funktioniert es im Chrome. Aber es spricht dann einiges dafür, dass das beim Safari nicht der Fall ist. Du wirst dann das Menü durch Javascript öffnen müssen.

  • Hier ist es gut beschrieben: https://stackoverflow.com/ques…es-the-hover-pseudo-class
    Für iOS Safari gilt: Wenn ein HtmlElement nicht "clickable" ist, hat es auch keine Unterstützung für die Pseudoklasse :hover.


    Wenn du also ein "clickable" Element verwendest, geht's.

    Du kannst zB einen <button> verwenden.

    Oder einfach dem Element einen click Handler verpassen. Dann ist es für den Browser auch "clickable". Dafür reicht eine Zeile JS:

    JavaScript
    1. document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});



    Ich würde dir aber trotzdem empfehlen, das Ganze öffnen und schließen. (das wird nämlich dann die weitere Herausforderung) mit JS zu implementieren und dich nicht auf solch hacky Lösungen zu verlassen.

    Dadurch bist du auch wesentlich flexibler, was das Verhalten angeht.

    Ich habe bisher immer js vermieden...

    Wenn du sicher gehen möchtest, dass dein UI auf allen Plattformen sauber funktioniert, kommst du an JS nicht vorbei.
    Du siehst ja, was passiert, wenn du versuchst ein einfaches Aufklappmenu nur mit CSS zu implementieren.

  • document.querySelector('#mobile-nav-dropdown').addEventListener('click', () => {});

    vielen dank, damit geht es wie gewünscht.


    Ich werde aber noch ein paar Kleinigkeiten auf der Seite anpassen und in der nächsten Version mit javascript arbeiten... Ich habe schon einen Kurs über 40h gebucht... der ist jetzt als nächstes dran... der html und css kurs den ich gemacht habe war 33 Stunden... war sehr lehrreich.., aber da wurde auf so ein Problem nicht hingewiesen :-)


    aber dafür hat man dieses tolle Forum, hier wurde mir schon oft geholfen, fettes merci dafür an alle!