Change menu position for small screens

AceCo55

I have used "screenfly" to look at my website.
Everything is good on screens above 13" and from smart phones down.
However on 10" and 12" screens, the HOME link on the nav bar just overlaps my header slightly.

The bigger problem occurs on only two tablet/phones: "iPad 1-3/mini" and "Kindle Fire HD 8.9". Here the nav menu overlaps my header by quite a lot rendering them almost unusable.
Note: my logo and header is actually a single jpeg image (Smugmug couldn't accomodate fine position adjustments when I used a text header).

Is there a way of forcing the nav menu to change, as it does for other tablets/all smart phones, when it runs out of room so that it doesn't overlap my header image?
I do have "collapse for mobile" on - but I think this only applying to the nav bar

denisegoldberg

interesting. I have looked at your site and mine while resizing the browser window. I don't see the overlap on my site while I do see it on yours. I wonder if that is because of the simplicity of my logo since it is simply one text element.

Do you have the container width set in the dimensions for each of your header items? I just checked and I have a container width of 50% set for my logo and 50% set for my menu. I wonder if some adjustments of those numbers will help the overlap on your site on those couple of screen sizes.

--- Denise

AceCo55

Hi Denise ... thanks for looking.
Using the Dimensions setting: I have the Logo/header Container set to 45% (The "Logo" is the symbol plus the site name and tagline)
The menu container is set to 55%

In the settings for the Logo/header Image, it has been set to 550px. I'm not sure why I chose this or what the consequences of changing it are.
Appreciate you looking.