Jump to content

How to let header pane only appear on first print page?

Recommended Posts

I have a webpage which contain the following element:

<heaeder class="site-header">

With CSS class definition as follows:
.site-header {
    position: relative;
    z-index: 223;
    box-shadow: none;


When I print now this (long) web page into a pdf doc file then this header pane appears at the top of each pdf page.

How can achieve that this header pane appears only at the FIRST pdf page?

Thank you


Edited by pstein

Share this post

Link to post
Share on other sites

It happens when element use position: fixed, by adding this to your style.css at bottom of page this should override fixed positioning.

@media print {
body .header-top {

     position: static;

You may need to adjust the padding/margin styling of elements below it as a gap appears.
Edited by dsonesuk

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...