iPad menu issue in landscape view

Support
#1

Hi, I am using pro on website (it’s in development at moment). I have looked at css that is listed to ensure that the mobile menu button shows on landscape as well as portrait for ipad device, but I can’t get anything to work.

http://www.btctestsite.co.uk/
The menu ends up stacking, and this then obscures text on page. Is there a way to fix this. Really want the solution to be mobile hamburger button on portrait and landscape.

Many thanks, Kate

Ipad landscape issue has returned
#2

Hi,

You can try adding this in Theme Options > CSS

@media (max-width: 1245px) {
.x-nav-wrap.desktop {
    display: none;
}

.x-nav-wrap.mobile {
    display: block;
}

.x-nav-wrap.mobile.collapse {
    display: none;
}

.x-nav-wrap.mobile.collapse.in {
    display: block;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}
}

Hope that helps.

#3

Hi I tried adding this in additional CSS and Global CSS, but it does not seem to work. Am I putting this in the correct place? I can only see customize - is that same as theme options? Could you confirm. or assist me to do this. I am now resorting to shortening titles in menu in attempt to resolve the problem temporarily but even that doesn’t work. Many thanks in advance

#4

Hi There,

You have an outdate version of PRO.

Please download the latest version from : https://theme.co/apex/dashboard

Access your site via FTP and remove Pro from wp-content/themes

After that you can re-install the theme via Appereance Themes.

The code should be addeed on Pro > Theme Options - you can finde this on your WP top admin bar.

Hope it helps

#5

That’s great thank you in that menu is now to button on landscape ipad, but it will not collapse so you end up with an open menu, that doesn’t close even when you click on one of the menu options.

Is there code to add that will keep menu closed as it would normally be on any system? Many thanks
Kate

#6

Hello There,

I have logged in to your site and updated the css code. I used this instead:

@media (max-width: 1245px) {
  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile {
    display: block;
  }

  .x-nav-wrap.mobile.x-collapsed {
    display: none;
  }

  .x-nav-wrap.mobile.x-collapsed.in {
    display: block;
  }

  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }
}

Please check your site now.

#7

You guys are fantastic! Thank you so, so much!

#8

You’re welcome and thank you for your kind words! :slight_smile:

#9

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