Bonjour à tous,

J'ai un petit problème que je n'arrive pas à résoudre sans passer par des complications dans mon CSS, je demande donc votre aide.

J'ai un menu que je veux horizontal et toujours en haut de mon écran : 

        <nav id="nav_horizontal">
            <a class="nav_bouton" href="#">Parcours associatif</a>
            <div class="nav_bouton"></div>
            <a class="nav_bouton" href="#">Projet achevé</a>
            <div class="nav_bouton"></div>
            <a class="nav_bouton" href="#">Voir mon CV</a>
            <div class="nav_bouton"></div>
            <a class="nav_bouton" href="#">Contactez-moi</a> <!-- contact -->  
        </nav>

#nav_horizontal
{
    display : flex;
    margin : auto;
    height : 50px;
    width : 60%;
    border : 1px solid black;
    background-color: white;
    box-shadow: 2px 2px 2px black;
    border-radius: 0 0 5px 5px;
    flex-wrap: wrap;
}

.nav_bouton{
    margin : auto;
    justify-content: space-around;
}

Donc jusque là tout vas bien

Cependant après l'ajout de : position:fixed sur #nav_horizontal je me retrouve avec : 

Quelqu'un aurait la solution? J'ai sûrement loupé un truc..

Merci à vous!

Salut

Si tu utilise la position fixed il faut spécifier la valeur de left qui est à 0 par défaut.

Donc

position: fixed;
left: 50%; /* pour le centrer */
transform: translateX(-50%); /* pour le décalage de moitié vers la gauche */

Voila

Bonjour, merci pour ta réponse,

J'avais testé et tout était bien centré mais le contenu du dessous passait sous cette barre. J'ai donc essayé de ruser un peu et mis une div vide avec un height supérieur à la barre pour que le prochain contenu soit plus bas.

Merci de ta réponse,

Une bonne journée!