I cannot get an img to display on my nav-bar in "Landing Page" project

I’m having trouble understanding how my Css is suppossed to make the nav elements center and stay fixed at the top of the page. I also can’t seem to find any useful img urls on the internet that will work as an image that is the correct dementions I think. Can anyone recommend a good site? or can you resize them or anything? I’ve passed the tests but only because I copied and pasted the header Css code from the given example page. I dont understand what I’m looking at though. Could someone explain the Css part to me and also give me any pointers to improve the overall design of my project. here is the url to my pen. https://codepen.io/VeganStephen/pen/gOweYdJ

For the images: if you don’t have an image with the right proportions, I would recommend pasting a larger image into paint or another graphics program, cropping it to the right dimensions, and saving it. You can upload images onto a site like postimages.org which will give you a url.

For the css, I think you mean the rule for the header tag? When I’m trying to figure out something like this, I find it helps to simplify as much as possible. There are several rules in there that don’t matter much – i.e., background-color, min-height, padding. If you remove these, you can see better what the other rules do.

Hint: the position:fixed and top:0 affect where the header appears in your document, while the display:flex and next two lines have to do with flexbox. So, you can experiment with one set of rules at a time.

Hope this helps… Good luck!

1 Like