.header { position: fixed; z-index: 20; width: 100%; top: 0; background-color: #fff; height: 60px; } .headerWrapper { display: flex; flex-flow: row; align-items: center; justify-content: space-between; padding: 5px; } .headerMenuElementLink { color: #000; } .headerMenuElementLink:visited { color: #000; } .headerMenu { background-color: #fff; font-family: "Poppins"; font-weight: 400; /*regular*/ font-size: 1.25rem; /*20px*/ list-style: none; display: none; width: 100%; } .headerMenuElement { padding-bottom: 5px; margin: 0; } .headerMenuElement:hover { border-bottom: 5px #FF563C solid; /*Orange Highlight*/ cursor: pointer; padding-bottom: 0; } .headerMenuHamburger { height: 50px; width: 50px; cursor: pointer; } .headerMenuMobile { font-family: "Poppins"; font-weight: 400; /*regular*/ font-size: 2rem; /*32px*/ list-style: none; display: none; } .nav-is-active { background-color: #fff; display: flex; flex-flow: column; justify-content: center; align-items: center; text-align: left; position: fixed; top: 75px; width: 100%; height: 90%; margin: 0; padding: auto; } /* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */ @media screen and (min-width: 778px) { .nav-is-active { font-size: 2rem; /*32px*/ } } /* 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; } .nav-is-active { display: none; } }