Navbar covering content when I click on a link to navigate to different sections of the page

Question

Here is my html:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

.project-img {
  width: 400px;
  height: 289px;
}

.projects-container {
  display: flex;
  flex-direction: row;
}

.li-nav {
  list-style: none;
  padding: 10px 10px 10px 0px;
}

#ul-nav {
  display: flex;
  flex-direction: row;
}

#navbar {
  position: fixed;
  background-color: white;
  width: 5000px;
}

#main {
  padding: 80px 0px 0px 0px;
}

a {
  text-decoration: none;
  color: black;
  font-weight: 500
}

.nav-link {
  font-size: 20px;
}

#all {
  font-family: Roboto;
}

<div id=all>
  <nav id="navbar">
    <ul id="ul-nav">
      <li class="li-nav"><a class="nav-link" href="#welcome-text">Sobre</a></li>
      <li class="li-nav"><a class="nav-link" href="#projects">Projetos</a></l>
        <li class="li-nav"><a class="nav-link" id="profile-link" target="_blank" href="https://github.com/caiocavalcante063">Github</a></li>
    </ul>
  </nav>
  <div id="main">
    <div id="welcome-section">
      <h1 id="welcome-text">Olá, meu nome é Caio e sou estudante de Desenvolvimento Web. Aqui, você irá encontrar meus principais projetos.</h1>
    </div>

    <div id="projects">
      <h2>Projetos</h2>

      <div class="projects-container">
        <div class="project-tile">

          <h3>Tribute Page</h3>
          <a href="https://codepen.io/caiocavalcante063/full/BaWmxvy" target="_blank"> <img class="project-img" src="https://i.ibb.co/CnrgnXL/Captura-de-tela-de-2021-06-03-11-04-03.png" alt="tribute page project"> </a>
        </div>

        <div class="project-tile">
          <h3>Technical Documentation Page
            <h2>
              <a href="https://codepen.io/caiocavalcante063/pen/dyvdydM"><img class="project-img" src="https://i.ibb.co/8cCPT2k/Captura-de-tela-de-2021-06-03-10-26-27.png" alt="technical documentation page"></a>
        </div </div>
      </div>
    </div>
  </div>

The navbar is in a fixed position, so when I click on a navbar link the page scroll down to the refered content. But the problem is that when I do so the navbar is positioned just where the content should be, covering it.

Is there a way to make the navbar links scroll down just a bit less so that I can get the expected effect? or a more effective solution?

Answer 1

Since the browser is doing what it is told to do properly (scrolling to the anchor's position), you have to do a little "hack" to get something like this to work. Here's the basic idea:

• Create a container element for both a title and an (unseen) anchor
• Create an element for the title, and put it in the container
• Create an element for the anchor, and put it in the container
• Use absolute positioning to move the anchor the appropriate amount up (generally something like FIXED_HEADER_HEIGHT + EXTRA_PADDING)

Here's a quick example:

.container {
  position: relative;
}

.anchor {
  position: absolute;
  top: -65px; /* given the fixed header is 50px tall, and you want 15px padding */
  left: 0px;
}

And the HTML:

<div class="container">
  <h2 class="title">Section Title</h2>
  <a class="anchor" name="target"></a>
</div>

Then, any link to #target will go to a location 65px above .title.