Блог

Я стараюсь, чтобы строка меню в заголовке оставалась липкой. Заголовок представляет собой flexbox с выравниванием по вертикали (flex-direction: столбец). Но, как вы можете догадаться, это не работает.

упрощенное расположение
здесь

HTML

 <header>
    <div id="quality-logos">
       [some images here]
    </div>
    <div id="logo_motte_top">
        [a big logo here]
    </div>
    <div id="navigation-wrapper">
        <div id="navigation">
            [some navigation code here]
        </div>
        <div id="menu_promo_text">
            <div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
        </div>
    </div>
</header>
 

CSS (сокращенный)

 header{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
div#navigation-wrapper{
    position:sticky;
    top:0;
}
 

Вы можете увидеть его вживую по адресу motteduesseldorf.de

Для ссылки вашего сайта <header> ваш дочерний элемент другого div называется #wrapper . position: sticky вероятно, применяется, но он не виден, потому что весь <header> div не отображается. Другими словами, position: sticky работает только «до» его непосредственного родителя.

Одним из способов исправить вашу проблему было бы выйти <div id="navigation-wrapper"> за пределы <header> и сделать его непосредственным дочерним элементом <div id="wrapper"> .