How to create "Card" fixed on screen

Post Reply
lne
Posts: 44
Joined: 30 Mar 2017, 08:47

31 May 2017, 12:52

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>


lne
Posts: 44
Joined: 30 Mar 2017, 08:47

15 Jun 2017, 13:22

great!

"position: sticky" is the solution

User avatar
DarthMaul
Posts: 583
Joined: 23 Nov 2015, 21:20

16 Jun 2017, 08:26

Glad to hear its worked.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest