Problem mit responsive NavBar

  • Hi,


    wenn ich mit @media unter 768px fahre, dann verschwindet meine NavBar und sie kann per Burger-Toole von der Seite reingeholt werden.


    Mein Problem ist, dass man sieht, wenn ich von 769px -> 768px gehe, wie die NavBar verschwindet. Das möchte ich nicht, ich möchte einfach, dass das umspringt und wenn ich auf den Burger klicke die Bar langsam ins Bild transformiert.



    Habe einfach in CSS:


    transform: translateX(100%);

    transition: transform 0.2s ease-in;



    .nav-active{

    transform: translateX(0%);

    }



    und in JS


    const nav = document.querySelector('.NAVLINKS');


    burger.addEventListener('click',()=>{

    //toggle nav

    nav.classList.toggle('nav-active');

    }

  • Dann nimm das

    Code
             transition: transform 0.2s ease-in;

    raus und mach es da rein

    Code
    .nav-active{
             transition: transform 0.2s ease-in;
             transform: translateX(0%);
    }


    PS:

    Deine CSS könnte man mindestens um die Hälfte kürzen, wenn man das etwas anders macht.

    * Link entfernt, weil existiert nicht mehr *

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!