Portfolio Project Top Navbar Help

Good day, Campers :slight_smile:

I’m currently working on the portfolio project and I have a few issues (currently) that I’m trying to resolve.

One: When I click a link in my navbar the selection will remain its active color (green) only while the mouse is held down. How do I keep it highlighted and how do I get it to change to the different links as I scroll to the corresponding sections of the page?

Two: How can I move my navbar links towards the center like in the FCC example?

Three: How can I get my page to scroll to the navbar’s respective sections, also like in the FCC example?

I’m trying to get all the functionality dealt with before I pretty everything up, so that’s why it’s so bare-bones, haha. If anyone have any other suggestions, I’m all eyes.

  1. If you want a navbar selection to maintain being green after being clicked, it’s gonna require some JavaScript to maintain that state. You could add an :active pseudo-class instead of :hover, but that still won’t get quite the desired effect. Same thing with highlighting the links as you scroll. You would need to create some way for the page to be aware of its state, and aware of the user’s state, and that requires JavaScript

  2. There are a few ways of going about this, but the simplest is just to add some padding-left: <some_number>px; to the topnav class.

  3. From what I can see you already have that working, your page just isn’t long enough for it to be noticably visible. If you make the page long enough you’ll be able to see it.

Also, as a quick pro tip I highly suggest you take the time to learn about css Flexbox. It’s a set a of layout rules to make responsive designing MUCH easier. It’s takes some getting used to, but trust me it will make layout issues a thing of the past.

1 Like

Thanks for all the help :slight_smile:

I’m going to avoid JavaScript for the time being since I haven’t gotten to that part of the map yet so I won’t worry about the active buttons.

padding-left was just what I was looking for. Thanks!

And I’ll be sure to check out Flexbox. Thanks again for the very informative answer.

While I have you here, might you have any suggestions for making my div background respond to changes in the window size like the example? I’m able to get my picture to jump down when I make my window narrow but the background doesn’t change.

That depends on what you mean by “background”. If you want the container around your “about” section to adjust to the image jumping lower, you just need to remove the height rule on your .about class.