.nav-link button in the nav element, I am taken to the corresponding section of the landing page

HTML-CSS
1

Good morning,

I currently have one user story that is not passing. When I click a nav link, the user should be taken to the corresponding section of the page. I read that the nav link and corresponding section must have the same ‘id’. I have that and when I click on the nav links on my page I am taken to the corresponding section but the user story fails. Additionally, I am having trouble changing the color of my nav links. Any help would be appreciated. :slight_smile:

Code Pen Link : https://codepen.io/AJS17/full/PgqOmK

Kind Regard,
Anthony

1 Like
2

Take a look at the error logs it generates in red. It’s expecting element with .nav-link to have a href attribute.

1 Like
3

Wow, thank you very much! I did not think that two ‘anchor’ tags were needed. Thanks again!

4

You should only need to use one anchor tag to setup your jump links. Here’s what you have in your pen:

<li class="nav-link" a href="#rules">
<a href="#rules" style="text-decoration: none"><b> Rules</b></a>
</li>

In this example your first anchor tag isn’t properly formatted so it’s not actually doing anything. The test passes because it just “looks” to see if the code is there in this case, not that it actually works. Here is how you can setup it up to pass and be functional.

 <li class="anything">
<a class="nav-link"  href="#rules" style="text-decoration: none"><b> Rules</b></a>
</li>

I moved the nav-link class to the anchor to satisfy the user story and I added the “anything” class to your list item tag so that you can still easily target it with CSS.

To change the color of your nav-links you can target them with CSS and use the color property, the same way that you would change the color of text.

a {
color: black;
}

In that example I would be targeted all anchor tags, you could target only specific tags by using class selectors

.anything {
color: black;
}

This would color any anchor tags with the class of “anything” black.
I hope this helps.

1 Like
5

Good morning,

After I changed my code around the two anchor links it did not look correct to me. Thank you for clearing that up. I made the changes that you suggested. Thanks again!

6

I’m glad that I was able to help.