How to make nav not overlap a table when you are at the top of a page. (Without margins)

[LegoWizardCode]

Question:
How do I make it so my nav bar with a fixed position, does not overlap my table when at the top of the page? I would like to not use margins, because I want the website to look good on multiple devices, regardless of screen size. (It might not even look good at all, I have only tested it with an iPad.)

Repl link:

https://originalcompositions.legowizardcode.repl.co/index.html

The issue is on the library page.

Code link:

https://replit.com/@LegoWizardCode/OriginalCompositions#style.css

HTML:

<nav class="nav-bar">
    <h1 class="nav-title">Original Compositions</h1>
    <div class="nav-text">
      <a href="index.html" class="nav-link">Home</a>
      <a href="library.html" class="nav-link">Library</a>
      <a href="authors.html" class="nav-link">Authors</a>
    </div>
  </nav>   
    <table class="lib-table">
      <tr>
        <th>Title</th>
        <th>Author</th>
      </tr>
      <tr>
        <td>Trio No.1</td>
        <td>Cooper L.</td>
      </tr>
    </table>

CSS:

.nav-bar {
  background: #ffffff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 60px;
  box-shadow: .7px .7px .7px 2px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 5;
}

.lib-table {
/*No Code Here Yet*/
}

[UMARismyname]

make the position sticky instead of fixed