.c-header__container { .icons { @include breakpoint(medium down) { .weather-info { $p:&; display: flex; align-items:center; justify-content:center; position: fixed; bottom: 0; left:0; height: 49px; width: 100%; background: #5FB245; z-index: 12; transition-property: opacity, visibility, transform; transition-timing-function: ease; transition-duration: 0.3s; transform: translateX(100%); svg { fill:#fff; } a { padding-left:0; } color:white; &__desc { font-size:15px; font-weight:600; } } @include breakpoint(large) { .weather-info { float:left; height:100%; &__desc { display:none; } } } } } @include breakpoint(medium down) { .c-nav.is-active ~ .icons { .weather-info { transform: translateX(0); } } } }