Плашка «Мы работаем» на сайт

Пример реализации с подобным кодом на сайте rusichsport.ru

<div style="background-color:#222E62;position: sticky;top: 0;z-index: 999;"><div class="alert_text">Интернет-магазин работает в обычном режиме! Принимаем и отправляем заказы! С 29 марта по 5 апреля работаем!</div></div>

<style>

.alert_text {

color: #fff !important;

max-width: 1100px;

margin: 0 auto;

text-align: center;

font-weight: bold;

text-transform: uppercase;

padding: 9px 10px;

}

@media (max-width: 450px){

.alert_text {

font-size: 9px;

line-height: 13px;

}

}

</style>

Если position: sticky не сработает, можно попробовать position: fixed и элемент-подложку:

<div style="background-color:#222E62;position: sticky;top: 0;z-index: 999;"><div class="alert_text">Интернет-магазин работает в обычном режиме! Принимаем и отправляем заказы! С 29 марта по 5 апреля работаем!</div></div><div style="height: 50px"></div>

<style>

.alert_text {

color: #fff!important;

max-width: 1100px;

margin: 0 auto;

text-align: center;

font-weight: bold;

text-transform: uppercase;

padding: 9px 10px;

}

@media (max-width: 450px){

.alert_text {

font-size: 9px;

line-height: 13px;

}

}

Возникли вопросы по реализации? Напишите нам в сообщения или на сайте hello.weare31.com