Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Responsive website overlapping

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

Problem courtesy of: nvncbl


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.


Solution courtesy of: Steve Royall


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Responsive website overlapping


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription