I’m trying to add media print CSS for individual posts to hide unnecessary items (e.g., menu, announcement bar, etc.) when printing. I can’t seem to get the CSS to work. I am using the Casper theme.
When I use the following code outside of @media print, it works fine. That is, the menu/announcement display on the blog page and are hidden on individual post page.
/* Test code - hide menu on individual post pages */
:is(body.post-template) {
.gh-head-menu, .gh-announcement-bar {
display: none !important;
}
}
But, when I put that code inside of the @media print, it hides the menu/announcement on both the main blog page and the individual post page when I print.
/* Hide menu when printing individual post pages */
@media print {
:is(body.post-template) {
.gh-head-menu, .gh-announcement-bar {
display: none !important;
}
}
}
Anyone know how to do what I’m trying to achieve?
Joan