Logo overlaps Menu on iPad

RonD200

I'm having a problem where my logo will overlap my navigation menu on my 9.7 iPad, it looks fine on the iMac and it looks fine on my iPhone. For some reason its not collapsing on the iPad. Any Suggestions on how to get this to work on the iPad?
Thanks,
Ron
www.ronskinnerphotography.com

Hikin' Mike

It isn't a iPad issue. It has to do with real estate . Looking at this site, http://quirktools.com/screenfly/#u=http://www.ronskinnerphotography.com&w=1024&h=600&a=1&s=1, you can see what your site looks like on other devices.

You have two options. First is to re-design your header. Second is to add a little CSS code to move your navigation under your logo when a specific screen size is detected.

Hikin' Mike

If you go for option two, then add this to your theme's site-wide CSS:

/**
* Resize Logo/Nav/Social for medium screens
************************************************/   
@media screen and (max-width: 1366px) {

    .sm-page-widget .sm-page-widget-content {
        margin: 0 12px !important;
        padding: 12px 0 !important;
    }

    .sm-page-layout .sm-page-layout-region, 
    .sm-page-layout .sm-page-layout-row, 
    .sm-page-layout .sm-page-layout-row .sm-page-layout-column {
        display: block !important;
        width: 100% !important;
        letter-spacing: normal !important;
        word-spacing: normal !important;
        float: none !important;
    }

}

Based on the ScreenFly tool yours top nav will change with screen size 1366px or less.

RonD200

Thanks I'll add the code and try it out!

RonD200

Thanks added the code and it works, for some reason I thought the nav would collapse on smaller displays, guess that only works on phones and not tablets. Didn't want to change my logo cause then it looked to small on my iMac.

Hikin' Mike

The code I gave you doesn't collapse. SmugMug hard-coded the collapse part, so all I can do is to move the nav out of the way.

RonD200

Well it works great on my iPad, Thanks