I need H1 help please

HTML-CSS
1

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

2

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?

3

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.

4

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
5

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.

6

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;

7

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

8

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.

9

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

1 Like
10

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.

11

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

12

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
13

Thanks, but I already fixed the problem.

1 Like
14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.