Grow your CSS skills. Land your dream job.

Navigation issue on iPad

  • # April 12, 2013 at 7:50 am

    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
    # April 12, 2013 at 8:02 am

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

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

    I would increase that to at least 148px :)

    # April 12, 2013 at 8:10 am

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

    # April 12, 2013 at 8:19 am

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

    # April 12, 2013 at 8:24 am

    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

    # April 12, 2013 at 8:44 am

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

    # April 12, 2013 at 9:16 am

    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/

    # April 12, 2013 at 9:43 am

    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.

    # April 12, 2013 at 9:48 am

    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?

    # April 12, 2013 at 2:08 pm

    here is how do to media queiries http://codepen.io/htmlmainiac/pen/oDIAG note the @media that is a media query

    # April 12, 2013 at 6:18 pm

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".