Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Sticky card header


Hello Team,

I have full-page laravel template and using only main page header.
In main body, I am using card , but I want to keep card header sticky, so when user scrolls the page, they need to see main website header and below card header sticky,
so that user can read all card body content along with card header,

How to achieve that?


user
Jigar Patel 2 years ago
Laravel HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Orabelle 1 year ago

This is a special card. grade calculator


user
Faizal Author 2 years ago

I apologize for the delay. Unfortunately, we don't have a feature specifically for making a card header sticky at the top. However, you can achieve a similar effect using custom CSS and JavaScript. For more information, you can refer to the documentation here:
https://preview.keenthemes.com/html/metronic/docs/general/sticky


G
Guest 2 years ago

Right now, the only widely accepted method to guarantee that table headers will remain sticky regardless of the surrounding code when their container overflows is to enclose the table element in a <div>, give that <div> an overflow auto or scroll property, and set its height to be less than the inner height of the window. https://devs.keenthemes.com/question/header-menu-1final grade calculator


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(