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
@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!
@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!
@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.