offcanvas menu and main menu

[alisamii]

In my layout, I have multiple menus, one in the header and one in the navigation sections. I also have the language switcher in the header section.

I have dropped the mobile menu particle in the off canvas section

It adds the menu from the header section to the off canvas, which isn't what I need.

At the very least, I need the menu from the navigation section to be displayed in the off-canvas. Ideally, I would need to be able to configure the off-canvas to display several items/menus in a particular order:

1. display the main menu (from navigation section)
2. display the secondary menu (from the header section)
3. display a horizontal rule
4. display the languages module

Please advise

[w00fz]

There isn't a way to move to offcanvas more than 1 menu at this time. However some RC ago we added the ability to let you target what menu you want to go in the Offcanvas, in case you have more than one menu rendering in the page. In your Layout Manager, open the settings for the Menu you want to show in Offcanvas (in your case the one in Navigation) and select Mobile Target.

[alisamii]

In think it's a very useful feature to be able to place multiple items in the off canvas. For example, the language switcher would probably fit perfectly well in the off canvas. And there should be some flexibility in how the menu is populated beyond just selecting the default menu to display off canvas.

Best regards,

Ali

On 6 Jul 2015, at 18:39, Djamil Legato notifications@github.com wrote:

There isn't a way to move to offcanvas more than 1 menu at this time. However some RC ago we added the ability to let you target what menu you want to go in the Offcanvas, in case you have more than one menu rendering in the page. In your Layout Manager, open the settings for the Menu you want to show in Offcanvas (in your case the one in Navigation) and select Mobile Target.

— Reply to this email directly or view it on GitHub.

[alisamii]

Any chance this can be added to the 5.2 release?

[mahagr]

Right now you can workaround the issue by using class="hidden-phone" etc and by having 2 copies from the particle or module. It may not be the ideal solution, but it should work.

Moving items to offcanvas is JS, so I have no idea what it would take to implement more general solution for this.

[tamerg]

Any update on this?

[w00fz]

No, nothing yet, this is marked for future release so it's not been looked at.

[mixahlos]

Well I am in the same situation. I have 2 menu particles in 2 sections, and I need an extra menu particle in offcanvas section.

So I tried to do what Mathias suggested, to use the classes class="hidden-phone" and for the one in the offcanvas class="visible-phone" But when I do that and add a second menu particle in the offcanvas then the default menu in the navigation section loses the Expand on hover functionality. So no dropdowns. When I disable the 2nd particle menu in the off canvas then the dropdowns appear again.

Any idea if the issue with the dropdown is easy to be solved ?

[mahagr]

Quote from @JoomFX in Gitter:

@mixahlos @mahagr I noticed that issue couple months ago. I was thinking to report it but I forgot. The thing is that whatever settings you have for the first menu in the DOM, they are applied to all other menus. @mixahlos in your case, the first menu in the DOM (the one in the Offcanvas I guess) has the "Expand on Hover" option unchecked and this is applied to all other menus

[coolman01]

Hi Are we anywhere with this yet? I would like to be able to add other modules, especially the languge switcher, as mention by @alisamii above.

[N8Solutions]

@coolman01 There a couple of ways you can add the language switcher to the offcanvas section. You can either add a new row to the offcanvas section and add a module instance and pick the module you want to assign there or add a module position to the new row and assign the language switcher module to that position or you can edit the menu by going to the menu in Gantry 5 and add a Module instance there and select the language switcher module.

To add to the above, if you add the language switcher via a module instance to the menu it will show up on both the desktop and mobile section in the offcanvas without having to to anything else. You will also need to add some custom styling targeted at the language switcher module to get it to show nicely in that position.

If you choose to add the language switcher by adding it to the offcanvas section directly then you will also need to add the language switcher to another position on your website so it is visible for desktop and tablet as the offcanvas section won't show up on the desktop unless you tell it to and even then hiding the language switcher in the offcanvas section on desktop and tablet is not, in my opinion, a good idea for a good visitor experience on your site.

@mahagr & @w00fz It would still be really nice if we had the ability to add more than 1 menu to the offcanvas section. I have a use case for this where I would need to have 2 visible in the off canvas section but only for certain pages.

[coolman01]

@N8Solutions - thanks for the tips - much appreciated. I've already tried everyone of the methods you mention. When I do manage to get it to show, it promptly disappears with the next page refresh! :-)

[N8Solutions]

@coolman01 if you are unable to get it to work either you are doing it incorrectly or you have a cache that isn't clearing. Are you using a CDN like Cloudflare by chance? If you are, you need to make sure you have omitted the administrator section from being cached as that will interfere with saving the settings on the admin side. Also, you will need to remember to clear the CDN cache or disable it while you are still testing the website.

[bomkallo]

I feel like you could cheat here, offcanvas section of course:)

1. Put particle menu into offcanvas into the first row
2. Put another particle with proper settings to another row
3. Another row is your custom horizontal rule
4. Put the module position or custom language switch (lang switcher module position best)

Well, the rest is simply typing proper sass code

Never use module instance because you will get too much overhead looking for it. Use module positions and particles as an option under !J.

Next, play around and design -> use mentioned hidden-phone etc, breakpoint classes, there are lots of them, then use gantry breakpoints to fill gaps.

To clear cache, use Opera or Chrome by simply hitting ctrl+shift+c, while debugger is open it will always clear any cache issues, if not, it's your fault or cms itself (inner cache system).