How to Create a Mobile Only Menu Like This

Hi there,

hmmm…. tricky one, you would need to first enable the Off Canvas Panel for the Mobile menu

https://docs.generatepress.com/article/off-canvas-panel-overview/

Do that first, and then ill take a look at the next requirements

Yeah, disable the cache plugin for now, it will be one of the plugins settings breaking it. You can debug later, once we get this done.

Let me know when its disabled.

1. Add your menu to the Off Canvas.
In Appearance > Menus edit the menu, and include the Off Canvas in its location.

2. Add this CSS to create the floating hamburger toggle:

nav#mobile-header {
    padding-top: 12px;
}
nav#mobile-header .menu-toggle {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    padding: 0;
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 10000000;
    font-size: 24px;
    background-color: var(--accent);
    color: #fff;
}
html.slide-opened nav#mobile-header .gp-icon svg:nth-child(1),
html:not(.slide-opened) nav#mobile-header .gp-icon svg:nth-child(2) {
    display: none;
}
html.slide-opened nav#mobile-header .gp-icon svg:nth-child(2),
html:not(.slide-opened) nav#mobile-header .gp-icon svg:nth-child(1) {
    display: block;
}
.slideout-navigation.do-overlay .slideout-exit {
    display: none;
}

Do that and then we can look at adding the other content to the Off Canvas.

Now add all the menu items you want to the off-canvas menu.

For the non-menu items, like title, search and msg, go to appearance > elements, create a block element, add all the content you want, select inside_slideout_navigation hook, set the location to entire site.

Once it’s done, we’ll have another look.

I don’t see this:

For the non-menu items, like title, search and msg, go to appearance > elements, create a block element, add all the content you want, select inside_slideout_navigation hook, set the location to entire site.

To cover:

1. go to Appearance > Elements -> Add New –> Block Element
2. in the element settings sidebar set the Hook to inside_slideout_navigation

https://docs.generatepress.com/article/block-element-hook/

3. set the Display Rules > Location to Entire Site

4. in the element editor
add the blocks you want to display inside the Off Canvas Panel.
E.g GB Image Block for the Logo and a Search Block

Yep, now add this CSS to remove the them padding from the Off Canvas Menu:

#generate-slideout-menu .inside-navigation {
    padding: 0;
}

The grid columns widths are default to 100% on mobile, set them to 50% width to achieve your desired layout.

If you do NOT need the default menu, you can remove it by unchecking the off canvas menu option at appearance > menus.

Hi there,

Add this as well:

nav#generate-slideout-menu .inside-navigation.grid-container.grid-parent, nav#generate-slideout-menu .inside-navigation.grid-container.grid-parent > .gb-container {
    height: 100%;
}