@media screen and (min-width:1001px){ .navbar2{ position: sticky; /*background-color: rgb(88, 80, 80);*/ /*background-color: #e4dcdc; */ background-color:white; top: 0; width: 100%; height: 2%; display: flex; justify-content: center; border-bottom: 1px sold #3b3737; box-shadow: 0 10px 50px rgba(92, 82, 82, 0.9); z-index: 5000; } .navbar2 img{ display: flex; width: 30px; height: 30px; } .navbar2 a{ display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; font-family: Tommy_Regular; text-decoration: none; color: rgb(255, 255, 255); font-size: 20px; border-radius: 5px; background-color: coral; margin:5px; padding: 5px; } .navbar2 img:hover{ border-radius: 15px; background-color: #ffffff; } .navbar2 a:hover{ color: #ffffff; text-decoration: underline ; box-shadow: 20px 20px 30px rgba(33,33,33,.2); } #actual{ font-family: Tommy_Regular; color: #000000; border-bottom: 2px solid black; } } .navbar{ display: none; } #open,#close{ display: none; } #boussole{ display: none; } @media screen and (max-width:1000px){ .navbar2{ display: none; } #boussole{ display: flex; position: absolute; right: 70px; top: 20px; padding: 5px; background-color: white; border-radius: 5px; border: 1px solid coral; width: 40px; height: 40px; } #open{ display: block; width: 40px; height: 40px; background-color: white; padding: 5px; border-radius: 5px; border: 1px solid coral; } #close { display: block; width: 40px; height: 40px; transform: rotate(180deg); padding: 5px; border-radius: 5px; border: 1px solid coral; } .open,.close{ border: none; cursor: pointer; position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; } .navbar{ display: block; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 600px; overflow: hidden; background: rgb(255, 255, 255); display: flex; flex-flow:column nowrap ; justify-content: space-evenly; align-items: center; transform: translateY(-100%); transition: transform 0.2s ease; border-bottom: 2px solid coral; } #actual{ color: coral; } .navbar:target{ transform: translateY(0); } li a{ display: block; font-family: 'Open Sans',sans-serif; font-weight: bold; font-size: 1.2rem; text-decoration: none; border-bottom: 1px solid black; padding-bottom: 0.5rem; color: rgb(0, 0, 0); } li a:hover, li a:focus{ border-bottom: 1px solid coral; } .li a:visited{ color: white; } }