Product Landing Page: A problem so specific I can't put it in the title

Hi all! The paragraphs keep on hiding under the fixed header and nav-bar everytime I call them with the hyperlinks in the nav-bar. They appear as if the page started from point zero .
I’ve been thinking a lot about that and came to the conclusion that maybe there’s a way to indicate the text where exactly has to show when called-that is, immediately below the header so we can read it.
Here’s my pen:
https://codepen.io/33P/pen/dyYJXBa

1 Like

@33P I took a look at your code and can see the issue of when the page width gets smaller and you click a nav menu link to reference a <section>, the <main> content is being covered by your fixed navbar.

Your <h2> elements inside <main> have a margin-top: 200px. Which I think was your attempt at avoiding the content being covered by fixed nav.

Remove this margin-top and then simply give the content inside <main> a fixed position below the navbar so whenever content is overflowed and scrolled it is never covered by the space navbar occupies.

I forked your pen and removed some uneccessary margin-top CSS, while adding a bit of styling to <main> elements to give your content a fixed position which is not covered by the pages navbar. Check it out Forked Pen and continue your journey! :smiley:

1 Like

@Dutchman Thank you very much! I turned the code inside out to put it somehow and it was so frustrating! Luckily there are people like you who are so kind and I expect to give some of that kindness back when I have the knowledge to do so. Thanks again!

1 Like

@Dutchman Hi, only now I could take the time to see what you’ve done and is great. I’ll have to re-read more about Flex CSS and peruse google for finding out more. And I’ll continue, as you said, my journey.

1 Like

You’re very welcome! @33P Keep on coding! :zap:

1 Like