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
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
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
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
[quote=“lasjorg, post:4, topic:320227”]
...
[/quote] I get it thanks again :3