I am working on creating a research report. When I want to save the report as a pdf the navigation ribbon overlays the content. How can I avoid this?
I don't want to hide the ribbons with printing, but they should not overlay the content.
My current ribbons:
<!-- top ribbon -->
<nav id="navitop" class="navbar is-fixed-top">
<div id="topc" class="columns">
<div class="column is-12">
<!-- disclaimer -->
<h1 class="title disclaimer is-4">
RESEARCH ONLY - <u>NOT</u> FOR CLINICAL USE
</h1>
<!-- disclaimer -->
</div>
</div>
</nav>
<!-- bottom ribbon -->
<nav id="navibottom" class="navbar is-fixed-bottom">
<div id="botc" class="columns is-gapless is-vcentered">
<div class="column is-4">
{{ meta.readable_id }}
</div>
<div class="column is-4">
<!-- disclaimer -->
<h1 class="title disclaimer is-6">
RESEARCH ONLY <br /><u>NOT</u> FOR CLINICAL USE
</h1>
<!-- disclaimer -->
</div>
<div class="column is-4">
{{ meta.timestamp }}
</div>
</div>
</nav>
You will need to add the specific classed for this situation to the html or body, as described in the official docs.
As-is, this does work only for the screen media.
To have a similar outcome on printed page media, you need to add specific classes at the page level,along these lines:
This code is not tested, but it should give you the idea.