[Resolved] Dedicated Mobile Menu

[Malik Merchant]

I have created 2 menus

#1) Primary Menu
#2) Off-Canvas Panel Overview

Both the menus are showing up on the Desktop as expected BUT the issue is on the Mobile screen, where only menu #2 (Off-Canvas Panel) is showing up.

I have set: Customizing > Layout Off Canvas Panel > On (instead of Mobile Only & Desktop Only)

What I understand is both the menus will be visible on the Desktop because there is a lot of space & it’s not practical to show 2 menus on Mobile.

In that case, I want to create a new menu (let’s say “Mobile Menu”) that contains all the links of the Primary + Off-Canvas Panel so that I can show it all in 1 drop-down on the mobile screen.

But there is no option to create & assign a dedicated menu for Mobile navigation.

Am I missing something here?

Any idea/custom code/hack to assign a dedicated menu to Mobile only?

Thanks!

[David]

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;
    }
}

[Malik Merchant]

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

[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 ?

[Malik Merchant]

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

[Ying]

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?

[Malik Merchant]

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.

[Ying]

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;
}

[Malik Merchant]

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

[Ying]

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

[Author]

Posts