1. There seems to be a problem with the way the main menu wraps. See first picture from your demo where the menu item wraps on the right side so "contact" overlays the search box making it unusable?

2. I have a related problem with the menu when I add css to make the logo move down... it's a larger logo and I don't want the header height that big... it looks great until I scale down, then the logo goes behind the menu. The code I used is -
h1#logo a img {
border-radius:7px;
box-shadow: 3px 3px 5px 0px #333;
position: absolute;
top:-12px;
z-index: 1;
}

Is there a way to apply that code only to large-8 and not small-12 or mobile-2? I tried putting in the id and class suffix but it don't work.

Thanks again in advance. Your support has been really top notch!

Hello Leslie,

Unfortunately I can not verify this behaviour. Which browser are you using and what are the dimensions of your viewport?

For 2. try increasing the z-index value. Try 9999 for instance.

Hi Krikor, The search box (or wrapping on the right) happens on every browser I've tried it on... Mac (Mavericks) Firefox, Safari, Chrome, Windows Firefox, IE. It happens at a window width between 985 and 1075.

Increasing the search z-index fixed it...

It did not fix the other problem, however.

Can you send me a link please, or is it fixed?

tinyurl.com/q3occ87

Thanks again Krikor. The menu doesn't get covered on Safari now but the logo doesn't move to the center top position. It just gets smaller. At small sizes the logo gets very tiny and unreadable. It still covers the menu a bit in Firefox.

I had more top menu items than the template and I don't want them to wrap automatically I put this css in -

.row .large-4 {
position: relative;
width: 20%;
}
.row .large-8 {
position: relative;
width: 80%;
}

Maybe I could have done it in a different way? It's the tablet sizes that seem to have a problem. Can't a suffix be used so the logo height adjustment only happens at larger screens?

Update: I made more adjustments so there are no overlaps at any size now even though the logos not moving to the center top at smaller sizes. I'm not sure I should be adjusting the .row .large-4 and .row .large-8 widths but that's how I got it to work, by adjusting those sizes inside of @media screen... max-width:1200px and 61.538em.

Are there standards that say .row .large-4 is always 33.33333% and .row .large-8 is always 66.66667%? or is it OK to change those widths. (so sorry for my ignorance here...)

It's not a matter of ignorance.
Since you know your way around coding I will give you a really useful resource.

foundation.zurb.com/docs/v/4.3.2/components/grid.html
This is the grid we used in that template. You can change the large-4 to large-3 and the large-8 to large-9
(and then the small class to small-x) with no hassle.

This way you do not need to always redeclare widths in your CSS file.

Do you want to ultimate control over your grid?
Open the template.css file, look how the grid is constructed and add a media query with a medium grid just for tablets.
Hint you take a look at Foundation's 5 grid:
foundation.zurb.com/

You're right on. That's the way it really should be done.. using the correct class instead of changing the definition of a predefined class through css. Thank you very much for the links to Foundation. It's exactly what I need to get a grasp on this.

I 'm glad I could help :)