Почему этот фиксированный заголовок смещается при прокрутке?

Question

У меня есть простой фиксированный заголовок, который, кажется, сдвигается вверх, когда тело прокручивается незначительно, но только на главной странице (и только на мобильном дисплее). С другими страницами все в порядке, поэтому я предполагаю, что это связано с тем, что элемент отображается / не отображается в одном экземпляре, а не в другом.

Я не могу найти исправление для домашней страницы, чтобы оно оставалось исправленным.

http://dev.bellavou.co.uk (лучше всего просматривать и использовать режим адаптивного дизайна для просмотра на мобильном телефоне).

http://dev.bellavou.co.uk/request-a-consultation/ Показывает, что заголовок остается фиксированным при точной прокрутке.

Может кто-нибудь помочь определить, в чем проблема?

body.fixed-header #header {
    position:fixed;
    z-index: 100;
    width: 100%;
    top:0;
}

Answer 1

Проблема с высотой вызвана классами CSS, которые запускаются ниже определенной точки.

И это вызвано дополнительным minimal CSS-классом, который добавлен к <header> и влияет на многие элементы ниже в структуре DOM.

Вы можете видеть, что, например, #branding зависит от добавленного minimal класса CSS.

Кстати, как вы можете видеть, ваш заголовок на самом деле не имеет ширины 100%.

Это потому, что это CSS:

body.fixed-header.home #header {
    width: calc(100% - 15px);
}

Изменение выше и ниже устраняет проблему.

body.fixed-header.home #header {
    width: 100%;
}

Ваши стили перезаписаны:

С width: 100%:

width: 100%.">

В подобных ситуациях всегда не забывайте проверять инструменты разработчика и отслеживать фактические, окончательные, вычисленные стили CSS. :.)