I need H1 help please

How can I keep the headings visible when I click on the link for my portfolio project?
here’s the link

If I understand you the right way, then your headings are visible, but when you click on the link then the scrollbar is jumping to another section. Is this what you mean?

I mean that you can initially see them, and then when you click the navbar link, it goes to a spot where the heading is hidden by the navbar.

There are a lot of things not correctly structured. The jump to the other section happends because you set a padding:220px on the nav links.

nav a {
  color: #004400;
  font-weight: 800;
  text-decoration: none;
  padding: 220px;
}

Delete the padding on the nav link and display the navbar as a flex element with a full width of 100vw. Then try to create another section below this and take care that the headings are not wrapped around the links.

Hope that helps :slight_smile:

1 Like

I got the navbar as a flex, but I don’t understand

try to create another section below this and take care that the headings are not wrapped around the links.

It looks already better…

The margin on top is because you set the nav to position: fixed; when you set the navbar to position: relative; then it will work. If you like to have a sticky navigation then set it to position: sticky;

relative does work, but in order to pass the tests it needs to be fixed at the top, and sticky doesn’t help

Then you need to find another option, you could set the hight from the navbar as margin-top for the other sections. This may not be an ideal solution, but just to give you an idea what´s the issue here.

I found the solution: navbar z-index :0;

1 Like

I dont think this is the solution, by default all elements are set to z-index: 0;

You can try to wrap the navbar in another div and then set this div to position: sticky. Play around with the different position settings and see how another div container will effect this.

How is it now? I put it in a div.

Hello
To make you h1s or rather your navlinks fixed in a position such that when a user clicks the remain in the same position do on the nav-bar:
Position:fixed;
top:0;
right:0;
Left: 0;
z-index:10;
Width:100%;

If this doesn’t work, inbox

1 Like

Thanks, but I already fixed the problem.

1 Like