.nav{ width: 100%; height: 60px; padding: 0px; position: fixed !important; top: 0px !important; left: 0px; z-index: 150; &-light{ .nav___share{ box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1); background-color: inherit !important; border: none; // border: 1px solid $green1 !important; a{ color: $green1 !important; } } } &__container{ width: 100%; font-family: numeralLight; padding : 0px 5px; a{ color: white; } &--buttons{ li{ text-align: center; padding: 6px 0px; border-radius: 6px; min-width : 130px; font-family: numeralLight; a{ width : 100%; height : 100%; } } } } &___share{ border: 2px solid $gray5; } &___login{ box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1); background-color: $green1; } &___logo{ margin-left: 20px; img{ height: 50px; } } &__search{ min-width: 60px !important; img{ transform: translateY(2px); width : 25px; } } } @media screen and (min-width: 1441px){ .nav{ &__container{ max-width: $maxWidth; &--links{ li{ padding: 0px; font-size: 14px; } } &--buttons{ li{ a{ font-size: 14px; padding: 5px 0px; } } } } &___logo{ // padding-right: 0px !important; span{ width: 2px; height: 15px; background-color: $gray6; margin-right: 15px; transform: translateY(-1px); } } &___login{ margin-right: 15px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px){ .nav{ &__container{ max-width: 1250px; &--links{ li{ padding: 0px 20px; font-size: calc(100vw / 115); } } &--buttons{ li{ a{ font-size: calc(100vw / 115); padding: 5px 0px; } min-width: 100px; } } } &___logo{ padding-right: 0px !important; span{ width: 2px; height: 15px; background-color: $gray1; margin-right: 15px; // transform: translateY(-1px); } } &___share{ margin-left: 12px; } } } @media screen and (min-width: 641px) and (max-width: 1007px){ .nav{ &__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{ &__container{ max-width: 500px; &--buttons{ li{ padding: 8px 6px; border-radius: 6px; min-width : 60px; text-align: center; font-size: calc(100vw / 32); font-family: numeralLight; } } } &___share{ display : none; } &___login{ } &__search{ min-width : 50px !important; & img{ width : 22px; } } } }