Website Style Guide Challenge - href"#..." link not working

Hi, everybody. Here is my Website Style Guide Challenge

Most of the work it’s done. However, I created a navigation bar with <a href"#..."> links and they’re not working as I wish.

Let me explain, when I click in “Colors” inside the nav bar, it displays the correct information at the top of the pege but, at the top of the pege it’s my nav bar which overlaps color’s info, I want the correct information to be displayed below my nav bar. I actually did it but not in a fancy way, I just added space without any info. However, this doesn’t work for link called “Fonts”.

Probably, it’s because I’m working with display: ; index-z css rules.

Can I fix it without JavaScript, I mean, just with HTML and CSS?

I’m guessing that the problem is this:

You click a link and it moves the target fragment to the top of the screen, but the fixed nav bar is overlapping some of the content.

I answered a similar question here:

1 Like

Yes, that’s the problem,

There are many methods to solve this problem, I didn’t see any of these methods on my Web Development career path, yet.