Help with @media print function


Basically I am working on self extra credit on my project. I have completed the Technical Document Project and I have been trying for weeks how to print the page without the navbar (It only makes it worst that @media was a section of the Techinal Document).

I have tried these approaches:

  • display: none (no effect)
  • height: 0;
    width: 0; (no effect)
  • visibility: hidden; (gets rid of navbar, but doesn’t change anything else)
  • for .nav-link
  • same thing as above but visibility: hidden; had no effect
  • for #main-doc
  • I have tried everything above with and without the #main-doc listed with no effects. The list below were the parts that I have modified.
  • width: 100%;
    height: 100%; (no effect)
  • width: auto; (Note: I have tried mixing the 100%'s and auto’s and had no effect)
    height: auto; (no effect)
  • grid-template-rows: 1;
  • grid-template-columns: 1;
    with and without
    +grid-column: 1/2;
    +grid-row: 1/2; (all of these had no effect)
  • @media print
  • @media print only
  • @media print only screen
  • @media print screen
  • @media print not (for navbar and nav-link only)
  • All of these did not effect the main-doc and I was only able to print part of the first page in all attempts.

If you have any ideas that may help me that would be great. I have left a link to the site below.

Thank you,

Web Link:

I am not sure I understand your problem here.
What I understand is you want to remove your navbar


This will hide your navbar, make sure you run your code and give codepen some time to do it.
When you hide it check your main css

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;

It’s position is absolute and margin-left is 310px; so there is going to be space on left side(310px).
Hope this helps.