Menu still prints when targeting no print class

Since you are targeting the ‘article’ element and the navigation is not contained inside this element, you should not have to add it to the do-not-print section at all. The fact that it is printing hints at some voodoo that the SFM navigation menu plugin is doing to ‘inject’ the menu, regardless.

One thing you might try is adding the following to your (child) theme’s quick CSS area:

@media print {
    #sfm-sidebar {
        display: none !important;
    }
}

This should force the sfm sidebar to not be printed at all.

Try that and post back with your findings.

Thanks so much for your response! So we ended up implementing the following:

@media print {
    #sfm-sidebar, .x-navbar, img {
        display: none !important;
    }
}

And we can confirm that the image within the article no longer displays on print, but from both Google and Safari desktop browsers, the menu still displays in print. However, on iPad/Safari, the menu is NOT being printed.

I am confuzzled!

from both Google and Safari desktop browsers the menu still displays

This sounds like it might be a caching issue. Try viewing in an incognito/private window, or clear the browser’s cache.

What is the result when printing from a different browser (Firefox) or another computer?

Thanks again for the follow-up!

This still happens in Firefox, incognito browsers, and I’ve cleared the website server cache in addition to my local. Can also confirm the client on a different machine and IP address is experiencing the same; no menu printed from Safari on iPad, but menu prints on all desktop browsers.

To see if the browser was taking in the CSS at all, I added “visibility: hidden;” and it removes the menu content from being displayed, but leaves the same white space it would have taken up in the print. I’m not sure why “display: none;” isn’t working.