Archived topic
Off canvas overlay
17 replies · Started by Eivind on April 11, 2019
Hello. I have just updated to Version 1.8.0-rc.1 wanting to try out the new overlay mobile menu. I'm using GP pro + elementor + jetmenu megamenu plugin and I'm not seeing a mobile menu trigger. Believe I have everything set up correctly in customizations
Hi there,
This is because you are using Elementor + Jetmenu to build the menu.
Couple options to consider:
- You can try adding a toggle by adding a menu item with slideout-toggle as a custom CSS class within Elementor. This is untested but it should work.
- Create that menu using GP + Jetmenu so that you are using WordPress's default menu system.
Let me know if this helps :)
Hi!
Right. I'm afraid it's too much work for me to change menu systems now.
But I like your first option. Can I use any type of menu item? What I did now was create a button and giving it class slideout-toggle and it looks perfect. But I guess some JS is required to make my mobile menu appear on click? Right now the toogle leads nowhere
Do you have a menu assigned to the Off canvas menu?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location
Yep. My mobile menu is assigned to it.
I don't think that it likes the slideout-toggle class applied to a <div>. Can you add it to the <a> element?
Oh okay. Wouldn't happen to have a recipe for that with elementor? Would probably have to edit the source code unless you guys have another trick up the sleeve
I tried creating a new anchor link with a slideout-toggle class, but no take.
Hi there,
you should just be able to do this:
1. In Appearance > Menus --> Screen Options Check the CSS Classes
2. Edit the Menu you're using
3. Add a Custom Link to the Menu
4. Give it a URL of #
5. Add the CSS Class: slideout-toggle
6. For the label, just add an empty <span><!--custom toggle--></span>
Fingers crossed it should display the toggle in the nav.
Ah okay yeah that worked, or at least the toggle shows. Looks like it's still inside a div though.
Like before with the button, it leads nowhere
Can you try setting the off canvas panel to "On" instead of "Mobile Only"?
Awesome! That did the trick. It shows two menus though
One is added as a widget in the Off Canvas widget area.
Okay, thanks.
So the question now is how do I display the toggle on mobile devices?
The toggle to open the panel? It should appear by default if you have the off canvas panel set to "On" or "Mobile only".
Yeah the toggle. It's visible, but only on desktop/tablets as a menu item. In mobile the toggle is not visible because it's inside the panel of my primary menu.
