How to create "Card" fixed on screen

[lne]

HI,

In the "utils" section of the template, it is explained how to create "Card" like this:

Code: Select all

<div class="card">
    Content here
</div>

<div class="card card-w-title">
    <h1>Card with Title<h1>
    Content here
</div>

I would like to create a header in my page that stays fixed when scrolling
How to create a "Card" that is fixed on the screen?
The card must be "responsive" and use the full width

I tried this, but the result is not great:

Code: Select all

<div class="ui-g-12" style="position:fixed;z-index:1000;top:54px">
    <div class="card card-w-title" style="padding-bottom:1em;height:50px;">
      <div  style="margin-top: -1.1em;">
        <div class="ui-g-12 ui-md-3">
          <p-megaMenu [model]="items" [style]="{'width':'150px'}"></p-megaMenu>
        </div>
        <div class="ui-g-12 ui-md-9">
          <h1 i18n="@mytitle">My title</h1>
        </div>
      </div>
    </div>
  </div>

[DarthMaul]

Hi,

Maybe this can be helpfull

https://stackoverflow.com/questions/121 ... crolled-to

[lne]

great!

"position: sticky" is the solution

[DarthMaul]

Glad to hear its worked.