Problem with navigation bar

HTML-CSS
1

Hi!

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: https://codepen.io/Shurlena/pen/zyxbEV

And any other suggestions would be welcome.

Thanks in advance!

2

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.

3

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;
}
4

  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.

Summary 
<header>
  <div id="navbar">
    <h1 id="title">Elon Musk</h1>
    <nav>
      <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>
  </div>
</header>

.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;
  }
}
5

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…

6

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;

Not:

z-index: 100px;