0

I am having trouble with my nav bar being over my content

http://jsbin.com/jusejozene/1/edit?output

I am not sure what I could do so please help

When the nav bar is in responsive/mobile mode it works but when its in desktop mode it doesn't :(

GoogleFailedMe
  • 125
  • 1
  • 1
  • 7
  • this will help you [Position Relative vs Position Absolute](http://stackoverflow.com/questions/10426497/position-relative-vs-position-absolute') – Vitorino fernandes Feb 23 '15 at 07:25

2 Answers2

0

All you have to do is change the position of your unordered list to static like this:

/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin: auto auto; 
padding: 0;
margin-bottom: 10px;
position: static;

}

And put your paragraph text inside of a 

<p>

tag

OR wrap your ul inside a div tag

EaziLuizi
  • 1,557
  • 1
  • 16
  • 25
  • 1
    Put content inside p tag, check edit. OR put
      inside of a
      , a
        isn't a block element
     – EaziLuizi Feb 23 '15 at 07:29
  • @GoogleFailedMe, Is it working now ? To avoid future confuson check out these links with regards to block elements etc. : http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block , http://www.w3schools.com/html/html_blocks.asp . They will give you a better understanding. – EaziLuizi Feb 23 '15 at 07:33
  • Easiest way is just wrap a div around the ul and it will give you what you want. Can then remove the p tag – EaziLuizi Feb 23 '15 at 07:45
  • it seems the nav bar is not centered anymore? is it because of static? I did margin: auto auto; – GoogleFailedMe Feb 23 '15 at 08:12
  • Did you apply margin:0px auto to the outer div ? – EaziLuizi Feb 23 '15 at 08:41
  • yes can you edit the jsbin and send it to me? not sure if I made a mistake or not :/ – GoogleFailedMe Feb 23 '15 at 09:32
0

By absolutely positioning your nav bar, you are removing it from the normal flow of the document.

It no longer reserves the necessary space on the page that it would as a block level element, which causes the overlap of content.

A few options -

You can change it to static positioning as outlined above.

Alternatively, keep the positioning as absolute - or even as fixed if you'd like the nav to remain affixed to the top of the window, and factor in the necessary margin at the top of your content to ensure the nav bar does not overlap.

Sara Mote
  • 236
  • 2
  • 7