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

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:

The issue is on the library page.

Code link:


<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>
    <table class="lib-table">
        <td>Trio No.1</td>
        <td>Cooper L.</td>


.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*/

make the position sticky instead of fixed

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.