Section link destination problems

Hi, FCC community. I’m currently doing the Product Landing Page portion of the FCC Responsive Web Design Projects. The problem is when clicking section links, both in my own page and in the FCC example page, (found here: https://codepen.io/freeCodeCamp/full/RKRbwL), it appears as if though you’re taken slightly past the start of the section, due to the fixed nav bar at the top of the page obscuring the start of the section. Is there any way to alter the landing point of a section link? Or do you just have to build the margins of each section with this principle in mind?
Thanks for your help!

1 Like

Here are some different techniques for fixing the jump links.

2 Likes

Be careful, though, of your HTML - I’m assuming you want all the <section></section> tags to be nested inside that one container element? That’s not quite happening in your HTML. If you do get your html squared away, I found the easiest approach to your question was to leave the top of the section to fall at the top of the screen, but i set its first-child to have a top margin, pushing it below the menu.

There are, as @lasjorg says, many many ways to do this.

1 Like

It’s actually a link to the fCC example project that was posted.

@snowmonkey assume it’s the empty .container div you are talking about?

I did some fixes on the example project at one point but I somehow never noticed that empty container div. Or I just ignored it, I can’t remember now. It doesn’t really hurt because it is collapsed and doesn’t do anything, but it really shouldn’t be there. I might do a PR for it, but updating the Codepens is sometimes a bit of a hassle.

1 Like

the container comment wasn’t aimed at your, @lasjorg - but the OP’s link shows, for example, an empty container just before the first section tag.

Maybe I’m not understanding you.

The link the OP posted is the fCC example project, not his/her project. You are given a link to it on the challenge page.

That is why I mentioned the PR and how I really should have seen it and removed it from the fCC example project when making the fixes to it.

@lasjorg I get a site not found error on dreamhost when I check out your link.

The site works for me, maybe it was just a server hiccup.

Sorry, turns out it was my HTTPS Everywhere extension.