.header { position: fixed; z-index: 20; width: 100%; top: 0; background-color: #fff; height: 75px; } .headerWrapper{ display: flex; flex-flow: row; align-items: center; justify-content: space-between; padding: 5px; } a{ color: #000; text-decoration: none; } a:visited{ color: #000; text-decoration: none; } .headerMenu { font-family: "Poppins"; font-weight: 400; /*regular*/ font-size: 1.25rem; /*20px*/ color: #000; /*Noir pur*/ list-style: none; font-style: none; display: none; width: 100%; } .headerMenuElement{ padding-bottom: 5px; } .headerMenuElement:hover { border-bottom: 5px #FF563C solid; /*Orange Highlight*/ cursor: pointer; padding-bottom: 0; } .headerMenuHamburger{ fill: #394596; height: 50px; width: 50px; } /* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */ .headerMenuHamburger{ display: block; } @media screen and (min-width: 778px) { .headerMenu{ display: none; } .headerMenuHamburger{ display: block; } } /* Les éléments du header s'affichent pour le breakpoint ordinateur */ @media screen and (min-width: 1140px) { .headerMenu{ display: flex; flex-flow: row; justify-content: space-around; align-items: center; } .headerMenuHamburger{ display: none; } } .headerMenuMobile{ font-family: "Poppins"; font-weight: 400; /*regular*/ font-size: 1.25rem; /*20px*/ color: #000; /*Noir pur*/ list-style: none; font-style: none; display: none; } .nav-is-active{ background-color: #fff; display: flex; flex-flow: column; justify-content: space-between; position: fixed; top: 75px; }