Navigation issue on iPad

[heybill]

Could anyone tell me why the main navigation/menu appears with a transparent background only on the iPad when it is oriented in landscape mode on this site:
http://camp-aviation.com/wordpress

[Mag]

There is min-height set on #top-header..

#top-header{
min-height:78px;
}

I would increase that to at least 148px :)

[heybill]

That is going to be too large. It throws off the design on all other platforms.

[Paulie_D]

You are going to have to give the menu a background style of some kind when it hits that media query.

[Paulie_D]

Actually, if you move the div with the class of logo **into** the #topheader you can leave the min-height at 78px. Just add overflow:hidden to #topheader

[heybill]

Thanks – Are these edits that you are suggesting to be made to the header.php file only?

[heybill]

While this fix appears to have resolved the navigation transparency issue, it has removed the background from behind the logo and causes an odd stacking of the nav in portrait mode on the iPad: http://camp-aviation.com/wordpress/

[Senff]

I think there’s just not enough room for the logo and 5 menu items when your iPad is in portrait mode, which causes the menu items to wrap. I’d suggest to use a media query there to make the text in the menu items some 12 pixels.

[heybill]

Right – I thought that might be the issue. Just not sure how to go about implementing a media query there. Is it basically picking up the same code that renders the menu in dropdown form on a smartphone?

[heybill]

Thank you for this hint, but I am unsure as to where to insert it in my css to get it to work.

[Author]

Posts