Ipad Breakpoint (landscape mode)

Support
#1

We are using the RENEW framework and have a left side menu. on iPad, we do not want to display the full menu but use the hamburger menu as seen on mobile (portrait mode)

Does anyone have some code to make this happen? We were using the following code and it was not working:

/*adjust breakpoint for showing mobile menu on PC, iPad display*/

@media (max-width: 1240px) {
a.x-btn-navbar {
display: inline-block;
float: right;
}
.x-nav-wrap.mobile.collapse.in {
display: block;
}
.x-nav-wrap.desktop {
display: none;
}
} .

Can send creds in separate message

#2

Hey @chmm9002,

Please note that X does not have an option to change the responsive breakpoints. They’re designed for the mostly used screen sizes. Also, the Pro theme is the answer if you want a collapsed navigation for a laptop screen size (1240px). I’ll give you a snippet but please bear in mind that we are not responsible for the issues that will arise from the use of it and further enhancement. Try inserting this code in Theme Options > CSS. If this does not work in your site, please consider using Pro.

@media (max-width: 1240px) {
    .x-nav-wrap.desktop {
        display: none
    }
    .x-nav-wrap.mobile {
        display: block
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }
}

Hope that helps and thank you for understanding.

#3

Thank you for the response.

All mobile screen sizes including smartphone portrait and landscape and even tablet (ipad) portrait function properly. It is only tablet (ipad) landscape mode that does not work as needed." I will send a private URL with the URL.

#4

Hi @chmm9002

Which model of iPad are you using? I assume it’s iPad Pro?

Please use “Secure Note” when sharing any private data, so me or one of my colleagues can check this issue.

Check this screenshot.

Thanks.

#5

just sent secure note. Also, any size pad

#6

Hi @chmm9002

In the code snippet mentioned above, feel free to change max-width: 1240px to something like max-width: 1400px to control the breakpoint which will allow the mobile hamburger icon to appear.

Thanks.

#7

we have done that but the menu does not work once it is clicked on.

#8

Hi @chmm9002

That’s another problem, it’s because you have this line in style.css file in your child theme directory:

.x-btn-navbar {
    margin-top: -60px !important;
}

Check this screencast:

[Album] Imgur

Thanks.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.