CODEWITHSUNDEEP
vmware-clarity
Patrick
Patrick

Reputation: 69

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

Upvotes: 3

Views: 1513

Answers (2)

akcasoy
akcasoy

Reputation: 7215

if someone has also either very this problem, or another problem where some css does not work within Angular:

Since we mostly structure our UI code in multiple components in Angular, and since each component puts its own host-tag in the generated DOM between the actual html tags, the clarity library has some problems with it.

So as a workaround, if you still want to be able to keep your current htmls as they are, you can define this css in each your component's css file:

:host { display: contents; }

This causes the component's box not to render; means the host tags are still visible in DOM, but they will not have any effect regarding CSS. And any clarity CSS will work again.

Upvotes: 0

hippeelee
hippeelee

Reputation: 1808

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.

Upvotes: 1

Related Questions