Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

  • Hi,


    ich habe folgendes Problem:


    Ich würde gerne eine Navigationsbar einpflegen, die sich je nach Größe des Fensters anders verhält. Etwas besonderes für die kleinste Größe bis 768px, was für das Smartphone zutrifft, danach dann etwas mit 959px, weil sich sonst die einzelnen Punkte oben in der Leiste überschneiden und danach dann etwas für eine Desktopansicht.


    Das Problem ist, das die Navigationsleiste das ganze so semi macht. Also wenn ich mein Fenster klein habe (bsp. 750px), und in diesem Zustand die Seite neu lade dann zeigt sie den Smartphonemodus an. Alles super. Wenn ich es dann größer ziehe, dann geht sie auch schön ab 769px in den Mittelmodus und ab 960px in den Desktopmodus. Aber da bleibt das Ganze nun. Wenn ich jetzt das Fenster wieder kleiner ziehe, dann springt sie nicht wieder zurück in die anderen Modi. Wenn ich aber die Seite dann kleingezogen habe, und neu lade, dann zeigt sie wieder den Smartphonemodus an. Warum ist das so? Was mache ich falsch? Benutze Safari.


  • Hi,


    das ist die html zu der nav:


  • das


    Code
    1. @keyframes navLinkFade{
    2. from{
    3. opacity: 0;
    4. transform: translateX(50px);
    5. }
    6. to{
    7. opacity: 1;
    8. transform: translateX(0px);
    9. }
    10. }


    macht Probleme, wenn ich das auskommentiere funktioniert es



    Javascript rufe ich in der HTML auf mit


    Code
    1. <script src="TopNavBar.js"> </script>


    sieht wie folgt aus: