My navbar overlays my content when it goes to a smaller screen width. I tried putting padding on the body(and changing the px), I copied other code that said that fixed it, but nothing. Can anyone help me with this please?
https://codepen.io/Garlicboy/pen/qNQxAk
The quick fix to your problem is simply to try a larger number of pixels. If you put padding-top: 600px, that will clear your navbar. It will also look kind of bad on a larger screen - I’ll get to that in a sec.
More importantly, though: you’re using html tags wrong (or rather you’re using the wrong html tags). Normally, your html would look something like this:
<html>
<head>
<!-- Information about your document -->
</head>
<body>
<!-- The actual content of your document -->
</body>
</html>
The <head> section of your document contains things like: links to CSS and Javascript files, special instructions for the browser, that sort of thing. None of that shows up on your webpage.
Everything that you write inside the html section on Codepen should be inside of the body of your webpage. The navbar, the main content, the footer - all of it. The catch is that on Codepen, it’s already assumed that everything you’re writing would normally go inside the body tags, so you don’t write that either. On Codepen, you only write things that would normally go inside the body tags. (If you click the settings icon, there will be a space to write things that normally go inside the “head” tags.)
On your page, I’d suggest changing your “head” tags to “header” - that’s what they should be, anyway. And then changing your “body” tags to just a regular old “div”.
So there’s that aside done. Back to your actual question.
There are a few different ways that you can handle this. The simplest one I know of is to figure out what screen size your navbar folds over at and to use media queries to change your css.
Thank you , I’m just going to try collapsing it