.nav{ width: 100%; background-color: #292929; height: 60px; padding: 0px 10px; position: fixed !important; top: 0px !important; left: 0px; z-index: 100; &__container{ width: 100%; font-family: numeralLight; a{ color: white; } } &___share{ background-color: #46454A; } &___login{ background-color: #81C342; } } @media screen and (min-width: 1441px){ .nav{ &__container{ max-width: 1350px; &--links{ li{ padding: 0px 20px; font-size: 18px; span{ width: 2px; height: 15px; background-color: rgb(197, 197, 197); margin-right: 15px; // transform: translateY(-1px); } } } &--buttons{ li{ padding: 6px; border-radius: 7px; min-width : 100px; text-align: center; font-size: 14px; font-family: numeralLight; } } } &___logo{ padding-right: 0px !important; } &___share{ margin-left: 20px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px){ .nav{ &__container{ max-width: 1250px; &--links{ li{ padding: 0px 20px; font-size: calc(100vw / 95); span{ width: 2px; height: 15px; background-color: #3F3F3F; margin-right: 15px; // transform: translateY(-1px); } } } &--buttons{ li{ padding: 6px; border-radius: 7px; min-width : 100px; text-align: center; font-size: calc(100vw / 95); font-family: numeralLight; } } } &___logo{ padding-right: 0px !important; } &___share{ margin-left: 12px; } } } @media screen and (min-width: 641px) and (max-width: 1007px){ .nav{ background-color: black; &__container{ max-width: 900px; &--buttons{ li{ padding: 6px; border-radius: 7px; min-width : 70px; text-align: center; font-size: calc(100vw / 65); font-family: numeralLight; } } } &___share{ margin-left: 15px; } } } @media screen and (max-width: 640px){ .nav{ background-color: black; &__container{ max-width: 500px; &--buttons{ li{ padding: 6px; border-radius: 7px; min-width : 60px; text-align: center; font-size: calc(100vw / 32); font-family: numeralLight; } } } &___share{ display : none; } &___login{ } } }