Dedicated Mobile Menu

Hi there,

theres a few ways, one way would be to:

1. your current Off Canvas Menu add that to the Widget > OFf Cavas using a Navigation Menu widget.

2. assign the primary menu items to both the Primary Navigation and the Off Canvas panrel.

at this point you should see on desktop the current layout you have.
but in the off canvas panel you will see your primary menu and your widget menu

3. Add this CSS to remove the primary menu in the Off cavnas when viewed on desktop:

@media(min-width: 1024px) {
    #generate-slideout-menu .main-nav {
        display: none;
    }
}

Thanks, David for the update. The exact code didn't work but the idea did!

This is what I created & it works fine - excelpt 1 issue

@media(min-width: 1024px) {
    #generate-slideout-menu .main-nav, #nav_menu-6, #menu-off-canvas-menu, .slideout-navigation .slideout-menu {
        display: none;
    }
}

@media (max-width: 768px) {
    #generate-slideout-menu .main-nav {
        display: none;
	}
}

.slideout-navigation .main-nav, .slideout-navigation .slideout-widget:not(:last-child) {
  margin-bottom: 0px;
}

Issue: The drop-down menus are not working in the Off-Canvas Menu, so the user won't be able to access the sub-menu items

Example: Membership > Free & Pro (working in the Desktop main menu but not working in mobile Off-Canvas Navigation)

Any suggestion on how to fix this issue?

Thanks for the help again David

The menu you added to the Off Canvas location, it doesn't have a sub menu - did you add those child items to that membership menu item ?

Yes David, the sub-menu items are there but not showing up in any of the OfF-Canas Menus (Desktop / Mobile)

Hi there,

The sub-menu of the membership menu item is hidden by this CSS:

#generate-slideout-menu.main-navigation ul ul {
    display: none;
}

As you have the cache plugin on, I can't see where the CSS is from.

Can you check if it's added by you? If you are not sure, can you disable your cache plugin so we can check?

Hi Ying, I turned off the cache plugin, can you please check now & suggest?

I have not added that code in the Custom CSS for sure, just double-checked.

Oh I see, the menu items are added using navigation widget, in GP off canvas menu, the sub menu will be hidden by default until you toggle its parent menu item.

But the navigation widget doesn't have this function, so the sub menu can not be shown in this way.

Try add this CSS:

#generate-slideout-menu.main-navigation .widget_nav_menu ul ul {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
}

That worked! Thanks, Ying & David.

Is there any place where I can submit this as a feature request?

Would love to see this feature as default in the coming update if possible.

Thanks again,
Malik

You can open an issue as feature request in GP premium's Github: https://github.com/tomusborne/generatepress :)