Stop fixed navigations covering content on scroll - Here Is The Codepen Link ( https://codepen.io/Arshad-Yaseen/pen/eYVKXLN )

index.html

<nav class="navigation-bar">
  <ul class="nav-list">
    <li><a href="#section-1">Home</a></li>
    <li><a href="#section-2">About</a></li>
    <li><a href="#section-3">My Work</a></li>
    <li><a href="#section-4">Contact</a></li>
  </ul>
</nav>

<section id="section-1" class="home" ></section>
<section id="section-2" class="about" ></section>
<section id="section-3" class="my-work" ></section>
<section id="section-4" class="contact" ></section>

script.js

const navigationBarHeight = document.querySelector('.navigation-bar').offsetHeight;

document.documentElement.style.setProperty('--scroll-padding', navigationBarHeight - 1 + "px");

style.css

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-padding);
}