header { background-color: #0d0d0d; } * { margin: 0; padding: 0; } nav { max-width: 1080px; margin: 0 auto; } nav { display: flex; height: 57px; padding-top: 5px; padding-bottom: 5px; } nav div { width: calc(50% - 68.25px); display: flex; } .navLeft { justify-content: flex-end; } nav a { display: block; padding-left: 17px; padding-right: 17px; line-height: 57px; text-decoration: none; color: #FFF; font-family: 'Oswald', sans-serif; font-size: 20px; } img[alt="logo"] { height: 57px; display: block; border-radius: 50%; } .imgInNav img { display: block; height: 25px; } .imgInNav { padding-top: 16px; padding-bottom: 16px; } .logo { margin-left: 40px; margin-right: 40px; padding: 0; } img[alt="cross"] { position: absolute; transform: scale(0); } @media screen and (min-width: 993px) and (pointer: fine) { .imgInNav { transition-duration: 0.25s; } .imgInNav:hover { transform: scale(1.1); } } @media screen and (min-width: 993px) { img[alt="burger"] { display: none; } #navForPhones { position: absolute; transform: scale(0); } } @media screen and (max-width: 992px) { .navRigth, .navLeft { display: none; } img[alt="burger"] { display: block; height: 45px; margin-top: 6px; margin-left: calc(50% - 83.25px); } .logo { margin: 0; margin-left: calc(50% - 28.25px); } #navForPhones { padding-top: 5px; padding-bottom: 20px; position: absolute; z-index: 100; background-color: #0d0d0d; width: 100%; } #navForPhones a { display: block; text-align: center; color: #FFF; text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 30px; padding-top: 5px; } }