I have made a product landing page for the challenge but getting one error

Actually i am facing three problems , first this error " When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page."

and second, when i scroll down, don’t know why but, my navigation bar goes under the div box . and it’s happening only with my second div box.

third, navigation bar’s opacity decreases at bottom div box
i need your bit help.

check it out my code here: -

Give the header a z-index property. When you position elements like that they have their own stacking context. e.g, z-index: 1;

i am not sure i understand the remaining problems

1 Like

thank you, this problem is now solved


Love the gradient on the website :). Hopefully these answers will help guide you to answer your questions.

  1. For the nav-links to take you to the correct spot on the page the <a> tags must have an href that looks like #*id-of-section* (href=#*id-of-section"). What I mean by “id-of-section” is the html element that has an id that looks like this: <div class="foo" id="*id-of-section*"></div>"

  2. Your second issue is what is due to something called a z-index. This is a css property that determines what is element is layered on top of others. To lean more about it checkout this link. To solve this you need to set the z-index of your navbar to a value that will stack it on top of the otheres.

  3. I don’t see an opacity decrease at the bottom div box. To me it looks like an optical illusion that the opacity changes.

Hope this helps and good luck!

1 Like

thank you so much for solving first problem. i had solved those remaining but thank you so much for your effort towards me

1 Like

No problem, glad I could help!