[Resolved] Menu off canvas issue on iPad

[Enrico]

Hi,

I have a navigation menu assigned to the Primary Menu and also to the Off Canvas Menu which is turned on only for Mobile. My the menu is no longer working on iPad, although it works well on iPhone. On iPad, all links on the page are no longer displayed.
I follow your advise, but it not fix the problem.
Also, I disabled all the plugins, but not success.

Please, may yuo help me?
My website is: https://www.guidedolomiti.com
Thank you.

[David]

Hi there,

I can see the menu on my iPad – have you tried clearing the browser caches on the iPad?

[Enrico]

Thank yuoo David.
Yes, I clear many times the browser cache on the iPad, but the issue is still there…
Enrico

[Ying]

Hi Enrico,

Change the 768px of this CSS to 769px:

@media (min-width: 768px){
.slideout-navigation .main-nav {
    display: none;
}
}

Let me know 🙂

[Enrico]

You are great, it works well now.
Thank you very much!
I have another question, please.
On the iPad I would like to have the off canvas menu in both landscape view and “vertical” view.
Is it possible?

[Ying]

On the iPad I would like to have the off canvas menu in both landscape view and “vertical” view.
Is it possible?

You’ll need to modify the mobile breaking point at customizer > layout > primary navigation.

Then modify all the media query (@media (max-width: 768px) and @media (min-width: 769px)) in your CSS which are related to the menu to match the new mobile breaking point.

[Enrico]

Thank yuo Ying.
I tried, but it doesn’t works well.
I modified mobile breaking point (customizer > layout > primary navigation) 1100px.
I modified the media query (@media (max-width: 1100px) and @media (min-width: 1101px)).
But in this way with iPad (only landscape view) the full screen background image is not displayed.
Any suggestion?
Thanks.

[David]

You can use this CSS to keep the Page Hero Background Full height on smaller screens:

@media (min-width: 769px) {
    .page-hero {
        min-height: 100vh !important;
    }
}

[Enrico]

Grazie David,
it works!!!
Just one last questio, please:
I is possible to use the off canvas menu on mobile and desktop?
I tried, but both burger menu and the primary menu are displayed…
Thank you very much!
Enrico

[David]

Yes, to remove the primary menu, you need to:

1. Create new Menu in Appearance Menus – do not add any menu items to it so it is empty.
2. Assign that menu to your Primary Navigation Location.

[Enrico]

Mmmm…. it works but all links on the page are no longer displayed….

[David]

You have this CSS:

@media (min-width: 1101px) {
        .slideout-navigation .main-nav {
            display: none;
        }
    }

Remove that!

[Enrico]

It seems all is right now!
Just to be sure I’m not doing something wrong, please may you confirm that the following is correct?

In customizer > layout > Container 1300px

Customizer > layout > primary navigation 1100px

And then CSS:

@media (max-width: 1100px) {
    .page-hero {
        min-height: auto;
    }
}

@media (min-width: 769px) {
    .page-hero {
        min-height: 100vh !important;
    }
}

[David]

Change this:

@media (max-width: 1100px) {
    .page-hero {
        min-height: auto;
    }
}

to:

@media (max-width: 768px) {
    .page-hero {
        min-height: auto;
    }
}

[Enrico]

Thank you very very very much!
All the best.
Enrico

[Author]

Posts