Having trouble with nav bar

HTML-CSS
#1

Tell us what’s happening:

Having trouble completing:

  • User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
    What I tried so far:
    setting links in my list to guide to the corect page.
    finding out what to do

  • User Story #13: The navbar should always be at the top of the viewport.
    What i tried so far:
    I used: https://www.w3schools.com/css/css_navbar.asp to learn better but, i still can’t figure out what to do.
    I tried setting position to sticky to absolute but it still would’t stick to the top

Your code so far
https://codepen.io/maria-hoek/pen/vYYEzeR
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.1 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

#2

Hello @KittyKora here are the solutions to your user story problems
#5: create a section inside your page give it an id then reference that id inside your .nav-links’s href attribute
#13: to make sure your navigation bar stays at the top of your page give a position value of fixed to your navbar

#nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* necessary if not the width of your navbar won't stretch to fill the entire width of browser */
}
1 Like
#3

How do i reference that id inside my .nav links href attribute? that is in the csc right? i already impleted the #colors one but it gives an error. I succeeded with the rest of everyhthing you did explain to me :3 thanks so much

#4

For each href value there needs to be an element with that value as an id.

<a class="nav-link" href="#blue">Blue</a>
<a class="nav-link" href="#red">Red</a>


<section id="blue">
...
</section>

<section id="red">
...
</section>
1 Like
#5

[quote=“lasjorg, post:4, topic:320227”]

... [/quote] I get it thanks again :3
#6