Tell us what’s happening:
So I have a hero image and I’m having trouble because my nav bar is like sitting on top of my hero image what would I use to try to counter this? ( Not sure why my images aren’t popping up on codepen)
You could adjust the padding-top or the margin-top of the image/image container using CSS so that it pushes the image further down. As for the image not popping up on codepen, I think it would better to use an image url from wherever you insist instead of just a .jpg file.
/*example */
#image{
padding-top: (height of the navbar);
/* or */
margin-top: (height of the navbar);
}
Hope this helps a little, and I’m sure someone has a better explanation than I do xD
The reason the header overlaps the content is that it is set to position: fixed;. Remember, an element with a fixed position doesn’t leave any gap where it had been. Instead, other elements fill up the place the element had been. So, as @joshm.dev said, you need to set a margin-top for the content.
The reason images are not showing up is because the path you have put in the src attribute is the image on your computer. You need a live link for images to work in CodePen. If you have a CodePen Pro account, then you can use their asset hosting. If not, do the following:
Go to Google Photos and upload your images
Select your image and click on the share icon at the top.
Click on the create link at the bottom of the popup that appears