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
    1. transition: transform 0.2s ease-in;

    raus und mach es da rein

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


    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 *

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von basti1012 ()