Problem with logo and nav menu overlapping on zoom

The menu itself has a couple of issues I don't know how to fix, Code seems valid (at least in that part), but the problem is that when an user enters the website, and it's zoomed (as in the case of netbooks), the website logo and the nav1 menu overlap. Any clues on what's failing here? I have tried in firefox, chrome and Opera on my computer and it's not overlapping, but on different computers is... Cache issues for that bit.

Any help will b开发者_如何学Ce more than welcomed!

this is the URL

It's because the resolution or browser width of the netbooks is too small to accommodate both the logo and the nav. I see the same issue when I drag my browser to be more narrow.

You can either shrink the logo or change the width of #header to 1024px to prevent it from shrinking too much.

However, this would mean content would spill out of the browser window on the netbooks.

I recommend shrinking the logo if you want to keep the 964px width of #header

your logo is absolutely positioned so it will always be 87px from left may be you need to write the css in a different way

.logo img {
left: 87px;
padding: 20px;
position: absolute;
top: 28px;
z-index: 18;
}