Hi, On my project I’m doing to complete the HTML/ CSS course, the scrolls over the text as you scroll down the page. It is probably best to have a look to understand my problem: https://codepen.io/SamCAber/pen/GROOmZV. Does anybody know how to code so the header is fixed to the top of the page but doesn’t cover the body as it scrolls down?
Also, in Code Pen, the CSS column seems to ignore my first few lines of code. Is there a fix for this?
Hello @SC92,
Your header is at the top of the your HTML code. Such as the other elements of your code, they follow each other one after one. In your CSS, you used the CSS property position and set it to fixed for the header. If you want the header to disappear when you scroll, it is on this property you should focus on. Was it this your wondering?
About the CSS I watched a little. Know that you don’t need the style tag here. It is a tag dedicated for the HTML code, when you don’t use an external file for the CSS. Also, I am not sure about what do you mean in saying:
The first few lines are:
<style>
.nav-link{
margin-right:10px;
}
If you wonder why you don’t have a marge at the right of your buttons it is because you use this class for the links, so the links inside the green buttons.
Hi @LucLH, Thank you for your response. Yes, in relation to the , I didn’t want it to cover the rest of the body of the text. (eg. I can’t use the email submit because as I scroll down the header covers it and I can’t type.) The Code Camp Challenge requires me to have a fixed which is fine but I’m doing something wrong as I can’t use the rest of the page if I do that.
In terms of the CSS, you have answered my question. I was trying to get the buttons aligned on the right-side of my page. I think in my next project though I have worked out how to do this. Thanks.
Hi @SC92,
What you can do is apply a height to your header, like this it will be less long on the page. You can apply it a background color too for example. One thing you have to change is your h1 tag. You should use it more for your logo and website title (for example in what you seem to want to do. Don’t include the nav in the h1, if you want to use a block, prefer div in that case.
Also, you don’t need the style tag in your CSS. The style tag is dedicated to the HTML to apply inside the document the style of it.
If you learn something, that’s all what matter! 
It is the expected behavior. However, it would make a lot more sense visually if the header had a background color.
You have syntax errors in the HTML and CSS.
I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.
Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see code marked in red. That is the new Syntax Highlighting showing you where the problems are.
Press the down arrow to the right of the code boxes and select the “Analyze” option. You can also use a validator tool.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.