Disable Off Canvas Panel on mobile

Hi there,

in Customizer > Layout > Off Canvas, you can change the display option to Desktop Only.

Hi David,

Yes, but it will also disable the menu on the mobile.

Yes, but it will also disable the menu on the mobile.

It should not. It should show the default mobile navigation on mobile, unless you've altered the mobile breaking point to a very large value (default value is 768px), can you go to customizer > layout > primary navigation to check?

If it's not the case, can you link us to your site?

Hi Ying,

Mobile Menu Breakpoint is set to 835px

The menu that is showing on the mobile now is the primary, however primary menu is using the canvas for Off Canvas menu

Hi there,

In Appearance > Customize > Layout > Off Canvas, can you set the display option to Desktop only first.

Then, add this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 835px) {
    .menu-bar-item.slideout-toggle {
        display: none;
    }
}

This will hide the offside menu at 835px, showing the primary nav.

Also, to confirm, have you set a menu to show for the primary menu? This can be set in Appearance > Customize > Menus or Appearance > Menus

Hope this helps!

Hi Fernado,

Yes, it showing the main menu on the mobile, however main menu is used to show the empty Canvas on desktop

This is the menu I’m seeing on Desktop: https://share.getcloudapp.com/X6uR2elb

On mobile, there’s no menu appearing.

To clarify, is this the same thing occurring from your end? Can you take a screenshot of what it looks like from your end?

Do you already have it setup like this?: https://share.getcloudapp.com/7Ku6xPQL

Kindly let us know.

Hi Fernando,

Yes, that is correct. Desktop is correct.
On mobile, there’s no menu appearing. Correct
Do you already have it setup like this? Yes

If you already have a menu set as Primary menu as such: https://share.getcloudapp.com/z8umwODv, can you try disabling all non-GP plugins to check if a third party plugin is causing your menu to not appear.

It seems that there may be one upon investigation: https://share.getcloudapp.com/bLuBpk1y

It would be good to take a backup of your site before doing so.

Kindly let us know how it goes.

Hi Fernando,

I have disabled everything, except generate press

Screenshots of the menu

https://snipboard.io/fJk3zq.jpg
https://snipboard.io/tiMc1f.jpg

I see. There’s no menu-items set in the Primary menu. Please add menu items and let us know how it goes.

Hi Fernando,

yes, but that also add the menu items to the desktop.

Yes, try adding this CSS in Apperance > Customize > Additional CSS afterwards:

@media (min-width: 769px) {
    div.main-nav {
        display: none;
    }
}

Kindly replace 769 with your mobile menu breakpoint.

Hope this clarifies!

Thanks Fernando, unfortunately that also removes the menu items from Off Canvas menu in the desktop