How to hide elements in the print mode?

If you need to print your website, you will notice that there are some elements that are not very useful, such as the sticky header, certain images, or other things like these. In order to remove them from the print mode, we will provide some CSS code that you can easily add to hide them temporarily.

The CSS code can be added in Appearance > Customize > Additional CSS.

📝 Note: The elements will remain active on the website, they will just be hidden from the print mode.

• hiding the header - the header is not very useful when it comes to printing the page, and it is also not very appealing.

To hide the header from the print mode, go to Appearance > Customize > Additional CSS and paste the following code:

@media print { 
.site-header { 
  display: none!important;
 } 
}

💡Result 

• hiding the footer - similar to the header, the footer can be hidden from the print mode, using this code:

@media print { 
.site-footer { 
  display: none!important;
 } 
}

• hiding the images - refers to the images added to certain pages, not featured images or images added in blocks.

@media print { 
img { 
  display: none;
 } 
} 

General case of hiding elements

Similar to these cases, you can hide any elements that are not relevant when printing the website's content. In order to do this, just follow these steps:

1

While you're navigating on your website, right-click on the element that you want to hide.

2

Click on the Inspect option, at the bottom.

3

Identify the class or the ID of the element that you want to hide from the print mode.

3

Add the identified class or ID inside the @media print{}, along with the "display: none" option.