CODEWITHSUNDEEP
htmlcsstwitter-bootstrapprinting
Sumit P Makwana
Sumit P Makwana

Reputation: 317

Print issue with bootstrap fixed navbar

I've made website with bootstrap fixed navbar. It has fixed navbar so in stylesheet body have top-padding of 70px.

When i print the page it add that extra space at top of paper. What can i do to remove that extra space causing by that top-padding.

Below is print preview with padding

Print Preview of with padding

Below is print preview without padding which i want with less space at top.

enter image description here

If i remove the padding the print is as i want but the in browser the content get behind the nav bar and i can't see the first 2-3 lines.

Please give me some solution to retain the fixed navbar and also the padding don't get include in print.

Upvotes: 9

Views: 8403

Answers (3)

blalond
blalond

Reputation: 885

I know you may or may not want to show the navbar in print. I wanted to show it, so I added this in my CSS (Bootstrap 3):

@media print { 
    .navbar {
        display: block;
        border-width:0 !important;
    }
    .navbar-toggle {
        display:none;
    }
}

Upvotes: 10

RobJohnson
RobJohnson

Reputation: 885

The accepted answer works perfectly, but if you don't want to add a new style sheet, an alternative is to wrap the body padding in a media tag. In your Site.css:

@media screen {
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

}

This specifies that the style should only be applied when viewing the page, not printing.

Upvotes: 4

Billy Moat
Billy Moat

Reputation: 21050

Add a new print stylesheet like so (place this after your main stylesheet):

<link rel="stylesheet" href="/css/print.css" media="print">

In print.css set your new CSS rule for the body tag like so:

body {
    margin-top: 0;
}

Upvotes: 9

Related Questions