Исправлены конфликты строки состояния с выдвижным меню. ⇐ Html

[Anonymous]

Я создаю сайт с фиксированной строкой состояния вверху страницы, как строка состояния iOS. Я хочу, чтобы он был зафиксирован вверху, чтобы он всегда был там, а контент перемещался под ним. У меня также есть выдвижное меню, которое вызывается кнопкой в ​​строке состояния. Все содержимое сайта заключено в элемент div, который отодвигается в сторону при выдвижении меню.

Моя проблема возникает со строкой состояния, когда меню выдвигается. Поскольку для него установлено положение: исправлено;, его не любит перемещать. Он сдвигает строку состояния вниз по странице.

Мой CSS для строки состояния:

Код: Выделить всё

.toolbar {
color: purple;
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
padding-top: 20px;
background: white;
border-bottom: 1px solid $white;
z-index: 99;
text-align: center;
}

JS Fiddle — прекрасный пример проблемы, просто нажмите кнопку МЕНЮ.

JSFiddle:
https://jsfiddle.net/mqrso95g/1/>

Подробнее здесь: https://stackoverflow.com/questions/387 ... e-out-menu