Navigation Bar Help for Portfolio Page


#1

Hey Everyone, I am currently working on the Personal Portfolio page. Most of what I’ve done has been fairly easy, and what I couldn’t do, google searches helped. However, I do not know how to make my navigation bar work. I’ve tried multiple different ways but I am so confused on how to actually make my navigation bar scroll down the page. I don’t know if i have missed something very easy, but it’s become rather frustrating. When I look at other people’s portfolios, It looks like a cluster and I don’t understand anything. Any feedback, or just somewhere to start, would be helpful.


#2

where is the link to the portfolio page?


#3

Look at position fixed if you want the nav bar to stay at a fixed position the whole time.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Try using scrollY and the scroll event if you want the nav bar to not be in a fixed position the whole time but instead stick to the top if the user scrolls below it.

EXAMPLE: https://codepen.io/Matthew_Keating/pen/eEOGjR
NOTE:Javascript is the only part required for the nav.

In the javascript check for if the user as scrolled below the top position of your nav bar. If they did the navbar’s top is set to the scrollY. If the user scrolls back up the navbar’s top is set to it’s original value.

https://developer.mozilla.org/en-US/docs/Web/Events/scroll
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY


#4

Those links are called Bookmark Links or in-page links, in-page anchors, etc… You can read about how to use them here in the section called HTML Links - Create a Bookmark: https://www.w3schools.com/html/html_links.asp

In the example they provide, they link to Chapter 4 with this hyperlink:

<a href="#C4">Jump to Chapter 4</a>

The #C4 represents the ID of the element they link to:

<h2 id="C4">Chapter 4</h2>

The above serves well for linking directly to a section of your page, but the scroll will be very fast. If you want to modify how quickly you get to that section, look up “Smooth Scroll”, but it will require some JavaScript.