Project Clarity - Fixed Navigation

I'm trying to create a fixed Navbar using Project Clarity

I'm using it in my Angular project, they are using FlexBox, I have tried putting in position: fixed but it doesn't seem to work, anyone have any ideas ?

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

Solution

In order to fix the header so that content scrolls underneath it, your application needs to have the correct Application Layout. Our components work within this structure because A properly structured layout enforces an optimal, consistent experience across applications.

The general structure for A Clarity Application layout takes this form:

<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>

Obviously, you can get rid of the parts that may not be relevant to your app like: alert-app-level, subnav etc ...

You can see this working in a quick demo I made with inspiration from Bob Ross. As you can see the content scroll underneath the application header.