Проект Ясность - Фиксированная навигация

Question

Я пытаюсь создать фиксированный Navbar, используя Project Clarity

Я использую его в своем проекте Angular, они используют FlexBox, я пытался вставить position: fixed, но, похоже, он не работает, у кого-нибудь есть идеи?

<clr-header class="header-6">

Answer 1

Чтобы исправить заголовок так, чтобы содержимое прокручивалось под ним, ваше приложение должно иметь правильный Макет приложения . Наши компоненты работают в этой структуре, потому что A properly structured layout enforces an optimal, consistent experience across applications.

Общая структура макета приложения Clarity выглядит следующим образом:

<div class="main-container">
    <div class="alert alert-app-level">
        ...
    </div>
    <header class="header header-6">
        ...
    </header>
    <nav class="subnav">
        ...
     </nav>
     <div class="content-container">
        <div class="content-area">
            ...
         </div>
        <nav class="sidenav">
            ...
        </nav>
    </div>
</div>

Очевидно, что вы можете избавиться от частей, которые могут не иметь отношения к вашему приложению, таких как: alert-app-level, subnav и т. Д. *

Вы можете увидеть, как это работает в быстрой демонстрации , которую я сделал по вдохновению Боба Росса . Как вы можете видеть прокрутку содержимого под заголовком приложения.