How to Hide an Element When Printing a Web Page

How to hide content on printing with MVC and Javascript?

With the information you've provided, I can't see any reason why the print media queries wouldn't execute and prevent the menu from being printed. Take a look at the fiddle that exposes this markup:

<td style="max-width: 100px;">
  <a href="javascript:window.print()" class="btn btn-default">Print</a>
</td>

<div style="top:120px;left:10px;position:absolute;" class="no-print">
  Won't print this!
  <span>Or this!</span>
</div>

It shows the basic elements you provided, and printing appears to hide the elements correctly.

Could you provide a little more detail? Maybe something else is going on that's exposing those elements or maybe the CSS hasn't been saved- something along these lines.

Hide buttons when printing

You can use CSS @media queries. For instance:

@media print {  #printPageButton {    display: none;  }}

<button id="printPageButton" onClick="window.print();">Print</button>