Problem with navigation bar


I’m working on my tribute page and have some troubles…I’ve included a navigation bar with “buttons” which I want to take me to the title named with the same id when you click them, but if you do, it takes you beyond the title. I don´t know how to fix it… Here you can see the code:

And any other suggestions would be welcome.

Thanks in advance!

It’s going to the the right place but your static menu bar is covering it. You’ll need to change how the menu bar works so it doesn’t cover content when fixed.

There are a bunch of different ways of dealing with this issue.

This will work for your current HTML. Because of the background color on the h2 you need the background-clip.

header {
  z-index: 100;

:target {
   position: relative;
   border-top: 200px solid transparent;
   margin: -200px 0 0;
   background-clip: padding-box;

:target::before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
  1. I would like to suggest that you make each section an actual section, i.e. wrap the h2 and the paragraphs in a section tag.

  2. Change this id #Personal Life to #Personal-Life (i would really prefer #personal-life but that is up to you). Remember to update the name everywhere (you can use find and replace, for me it’s Ctrl + Shift + F on Codepen).

  3. You have the container-fluid class in the HTML, but you are not using bootstrap.

  4. .C, .P and .A is not good class names and the only difference between them is that the P class has less margin. Combine them into a .nav-link class and give it to the links instead, remove the C, P and A CSS

  5. The responsiveness needs some love, but that is often the case and you’ll get there with some work. Here is a suggestion for the header/nav.

  <div id="navbar">
    <h1 id="title">Elon Musk</h1>
      <a class="nav-link" href="#Career">CAREER</a>
      <a class="nav-link" href="#Personal-Life">PERSONAL LIFE</a>
      <a class="nav-link" href="#Awards">AWARDS</a>

.nav-link {
  color: hsl(155, 100%, 56%);
  opacity: 0.8;
  font-family: Arial Black, Gadget, sans-serif;
  text-decoration: none;

nav {
  display: flex;
  justify-content: space-around;

@media (max-width: 800px) {
  nav {
    flex-direction: column;
  #navbar {
    height: 160px;

Many thanks @lasjorg ,really helpfull!

Now, I have new issues. Once the anchor link takes me to the corresponding part of the page:

  1. I can’t click onto another anchor until I scroll under the h2.

  2. If I scroll down, the h2 goes above the navigation bar. I would like to do it behind it, like the rest of the content.

I can’t get with any solutions…

The value for the z-index property is an integer. There is no unit associated with integers.

Or in plain English, just remove the px unit from the z-index value (Edit: I’m referring to the header CSS).

It is:

z-index: 100;


z-index: 100px;