Keeping Nav bar from overlapping my hero image

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)

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

1 Like

Hey rpatt!

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 */
    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

  • Cheers!

Hello @rpatt,

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 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
  • Click on the create link again
  • Copy the link and go to
  • Paste your link and click on Generate
  • Now copy either the link that appears or the HTML code that appears.
  • Paste your code or link in CodePen

Hope this helps!

1 Like

Thank you so much for this tip!

1 Like

Thank you this worked

1 Like