I have 2 content editor's which are placed at top left and top right. Top left is only for navigation while top right is for pure contents. When I click print preview, it also show navigation. I would like the print preview to only show pure contents (which is at top right), rather than showing navigation too.

How can I do this?

enter image description here

enter image description here

1st picture: Top left for navigation & top right for contents

2nd picture: Print preview mode where it also shows navigation.

I do not want it to show the navigation part

1 Answer 1


You have to create separate .css for printing. In .css file you have to include @media print.

@media print 
        display:none !important;

In comma separated class name also include the name of class applied to left column of page which shows the navigation.

To know more about .css for printing, you can refer this link.

Hope this helps.!!

  • it works but it hide the only top part of the page which is the icons, navigation and 'check in' banner. The navigation is still visible. I create a div in navigation, and display: none. It work but then it still have white space, without any navigation in that area.
    – Zul Hazmi
    Nov 24, 2015 at 5:48
  • I add #MSOZoneCell_WebPartWPQ2, #WebPartWPQ2 for the left column. it works! thank you.
    – Zul Hazmi
    Nov 24, 2015 at 5:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.