The Navigation Bar cover my conten

I’m trying to creat a navigation bar on top of my page but for some reasons, my navbar cover the content of the page. I’m cann’t figure out what happened. Please tell me where I did wrong. :sweat:


Here’s my code: http://codepen.io/minhmoc710/pen/gWmNMa?editors=1100

Add some padding-top to your content div.

1 Like

The navigation bar is most likely fixed up at the top. Which means the block element navigation have their own space. Almost like on an entire new layer.

To get the content to show, you need to use padding top on the content. Or margin-top. Push it down by the height of the navigation bar.

For some reason, when I add margin-top, the content won’t show up but instead the whole page is moved down?? When I add padding-top to my cotent, only the content is moved down??

You need to post your html for us to review.

I posted my codepen above!
http://codepen.io/minhmoc710/pen/gWmNMa?editors=1100

Hi @minhmoc710. You don’t need a div element nested inside your nav . Remove it and give that a go. You may have to modify your CSS file to adjust the appearance. As far as your content is concerned, I will recommend placing your content in either a section or an article tag.

I think you might need to go back to the basics first. You can start by reading more about the box property, where padding, margin and border goes. Padding and margin are not the same and act differently. You can read more about them here: http://www.htmldog.com/guides/css/beginner/margins/