• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fehler beim Firefox bei der Navigation

marcelgerard

Mitglied
Hallo Leute,

ich baue seit Tagen an einer Navigation und habe jetzt ein Problem mit dem Firefox. Als einziger Browser verursacht er den Fehler. Auf meiner Testeite ist oben links eine Navigation. Wenn man sie anklickt sollte normal statt dem Menü-Icon und dem Wort Navigation "X Navigation" erscheinen, was auch bei allen anderen Browsern, Smartphones der Fall ist, nur der Firefox verweigert den Dienst und zeigt es nicht an. Nur wenn man wieder F5 macht, taucht es auf.

Die CSS Anweisung die den Fehler verursacht hab ich auch schon gefunden. Es ist:

Code:
.nav-label-pos {
  position: fixed;
  top: 0;
  z-index: 999;
}

Wenn ich position: relative schreibe funktioniert es, aber ich möchte ja das beim Scrollen das "X Navigation" stehen bleibt, was bei position: relative nicht der Fall ist. Hab ich was falsch gemacht oder gibt es eine andere Lösung für das Problem?

Vielleicht hat jemand eine Idee?

LG Marcel
 
Werbung:
position absolute geht auch.
Wie wäre es mit Javascript nach zu helfen,fals anders keine Lösung gefunden wird?

Edit
position sticky funktioniert bei mir ganz gut
 
@basti1012 - interessant, funktioniert auch bei mir. Bisher funktioniert es auch bei allen Browsern sowie beim Smartphone. Ist ja interessant das fixed nicht geht aber sticky schon. Ich kannte sticky noch gar nicht. Sieht aber im Moment alles so aus als wäre es genauso wie ich es wollte. Wegen JavaScript, dass kann ich leider überhaupt nicht. Hab zwar schon danach geguckt aber komme da noch nicht klar.

@Sempervivum - hab es auf meiner lokalen Version getestet und die doppelte ID gegen eine andere gestuscht. Die Reaktion war unverändert. Nur das "fixed" bei der CSS Anweisung änderte was. Vielleich tist es ja mit sticky gelöst. Scheint ja bei älteren Browsern noch nicht gängig zu sein, aber naja.
 
Werbung:
@Sempervivum - ich bin leider einfach nicht erfahren genug um solche Tricks zu kennen. Ich würde lieber auch alles von einem Programmierer machen lassen, aber mir fehlt dazu eben das Geld, also muss ich mich selbst durchschlagen. Was jetzt noch bei deiner Version fehlt, dass das Menü welches sich aufklappt ganz oben andockt am Browser und trotzdem der Navigations Punkt zu sehen ist und beim Scrollen stehen bleibt. Hab es selbst gerade versucht, aber finde die Lösung nicht. Wenn ich nav z.B top: 0; gebe hüpft es hoch, aber dann verschwindet das "X Navigation". Das as-nav-background z-index: 999; hat scheint da nicht zu helfen.
 
Okay sorry, du hast das was ich wollte mit dem X schon anders gelöst, mein Beitrag eben war völlig sinnlos ^^ Im Grunde ist es ja genau jetzt so wie ich es will. Ich werde es morgen mal alles verschönern etc. Mal sehen ob es dann alles weiter klappt. Ich finde es sehr gut das hier alle so locker sind, dass erlebt man nicht in allen Foren. Für mein Vorhaben ist allerdings sehr bald ein Programmierer mit ordentlich Kenntnissen erforderlich, weil ich baue an etwas größerem (schon gefühlt seit 5 Jahren). :S
 
Okay ein Problem hab ich noch wo ich nicht ganz lösen kann. Bei dir steht folgende CSS Anweisung:

Code:
max-height: calc(100vh - 2em);

Doch die dockt nicht unten am Browser an, was ich gerne hätte. Genauso andersrum, wenn das Menü viele Einträge hat, ist der letzte immer nicht zu sehen. Ich denke das 100vh ist für den gesamten Bildschirm, das Menü öffnet sich aber nicht 100% im ganzen Bildschirm, sondern versetzt unter dem Wort "Navigation" Ich hab daraus mal folgendes gemacht:

Code:
  max-height: 100vh;
  min-height: 100vh;

Das min-height sorgt schon mal dafür, dass die Navigation, egal wie groß der Inhalt ist, unten andockt. Aber irgendwie bekomme ich es nicht hin, dass 100vh auch wirklich 100vh ergeben bez. auswirken. Was bedeutet die Anweisung bei dir? Was hat es mit den 2em auf sich?
 
Werbung:
Bei deiner Version zieht sich die Navigation aber nicht nach ganz unten. Musst du mal mit einem Desktop angucken, weil da soll es ja auch so sein. Hab mal gemacht wie ich meine: https://artistfy.com/test/ - wenn das Menü nicht bis unten hin reicht soll der Hintergrund trotzdem bis unten gehen. Das hab ich bisher nur mit min-height: 100vh; geschafft. Aber mir ist eben eingefallen, trotz das es nicht exakt 100vh sind, kann man ja unten in der Navi immer noch mit padding oder margin Abstand schaffen. Ich glaub ich denke da viel zu umständlich.
 
Danke nochmal für deine Beispiele. Ich hab es jetzt endlich so perfekt wie ich es haben will. Hier meine Testseite zum drüber gucken. Hab auch schon Logo und Login eingearbeitet. Fehlt im Grunde nur noch CSS. Einzige wa sich jetzt noch sehr cool finden würde, wenn bei der Desktop-Version auch die Beispiel-Seite sich wie hier verdunkelt wenn man das Menü öffnet. Weiß nicht ob man das anhand meines Codes mal testen kann? Ich hab bisschen versucht, aber zerlegt die Seite immer.
 
Werbung:
ich muß sagen das die Css Variante mir auch gefällt.
Nur auf sowas komme ich nie weil ich ein Javascript Junky bin :)
 
Werbung:
@Sempervivum - oh man, jetzt hab ich mich mehr oder weniger selbst reingelegt. Das mir echt peinlich. Hatte die CSS Anweisungen schon an meine angepasst und bei dir nur Copy & Paste gemacht. Passiert mir leider öfter sowas dummes. Aber danke das du so viel Geduld mit mir hast.

@basti1012 - ich beneide dich das du ein Junky bist. Ich kann es leider gar nicht und würde es gerne können. Ich bin wie schon mal erwähnt nicht so mega gut, kann HTML und CSS gerade so und lerne nebenbei gerade PHP. Hab leider kein Geld um mir einen guten Programmierer zu leisten, obwohl dringend einen bräuchte.
 
@Sempervivum - Eine Frage hätte ich noch. Könnte man noch zusätzlich dieses overlay klickbar machen, so dass sich das Menü wieder schließt, wenn man einfach irgendwo auf die Fläche klickt?
 
Vielleicht will ich auch zu viel, muss jetzt ja auch nicht mega perfekt sein. Bisschen denken muss ein User ja ab und an dann doch mal. Ich versuche gerade alles so anzupassen das es fertig aussieht. Ich bin gespannt welche Fehler mir noch so begegnen.
 
Werbung:
Zurück
Oben