Bonjour,

J'ai changé la mise en page de mon entete quand je suis sur un viewport tablette/mobile. Les nav ne sont plus visibles mais s'affichent/se cachent lors du click sur une image "burger menu", jusqu'à la ca va, mon probleme est que lorsque les navs ne sont plus visibles (display: none) et que je réagrandis le viewport au dela de 1199px eh bien les navs ne sont toujours pas visibles alors que j'aimerais que lorsque un resize du viewport (width) est au dela de 1199px, les navs passent à display: block quoi qu'il arrive

Bien sur je peux faire ca en modifiant la fonction onresize mais je trouve ca un peu lourd et pas optimisé

Voici mon HTML :

Mon code SCSS : 

header{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, $primaryColor, $secondaryColor);

    > nav{

        flex-direction: row;
        align-items: center;
        display: flex;

        > ul{

            margin: 0px;
            padding: 0px;
            display: flex;
            flex-direction: row;
            align-items: center;

            > li{

                display: block;
                list-style: none;
                margin: 0px 24px;

                > a{

                    text-decoration: none;
                    color: white;
                    font-size: 1.3em;
                }
            }
        }
    }

    > a{

        text-decoration: none;
        margin: 0px 12px;

        > strong{

            color: white;
            font-size: 2.6em;
            font-family: 'Lemon', serif;
        }
    }

    > img{
        display: none;
        width: 56px;
        height: 56px;
        filter: invert(100%);
    }
}

@media all and (max-width: 1199px){

    header{

        flex-wrap: wrap;
        justify-content: space-between;
        padding: 8px 24px;

        > nav{
            display: none;
            width: 100%;

            > ul{

                flex-direction: column;
                align-items: start;

                > li{
                    margin: 8px 0px;
                    margin-left: 0px;
                }
            }
        }

        > nav:first-of-type{
            order: 3;
        }

        > nav:last-of-type{
            order: 4;
        }

        > a{
            order: 1;
            margin-left: 0px;
        }

        > img{
            display: block;
            order: 2;
        }
    }
}

let imgMenuResponsive = document.querySelector('header > img');
let responsiveMenus = document.querySelectorAll('header > nav');
let responsiveMenusAreDisplayed = false;

imgMenuResponsive.onclick = function(){
    if(responsiveMenusAreDisplayed == false){
        for(let i = 0; i < responsiveMenus.length; i++){
            responsiveMenus[i].style.display = 'block';
        }
    }else{
        for(let y = 0; y < responsiveMenus.length; y++){
            responsiveMenus[y].style.display = "none";  
        }
    }

    responsiveMenusAreDisplayed = !responsiveMenusAreDisplayed;
};

-
Edité par Anonyme 15 octobre 2024 à 20:59:06