Responsive website overlapping
I am trying to make a website Responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here How do i make the nav bar move to under the logo when i re-size the window? Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's. You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items. This is causing the nav to always just march on over the logo. Position fixed ignores the Document Flow and places it wherever you put it.
You need to get the navigation back into the document flow Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points You will also need to remove all those positioning styles. That should get you half way there. I would help more but I've just been given a rum and coke so best to stop now.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here