Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

nav collapse icon and slide out content for tablet, phone or full screen

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hello,

1.) How do I set up the nav collapse icon (three little lines) to only show when I want the slide out to be used. I do not want the icon to show when in full screen, only tablet or phone. I am using the nav collapse for a menu in phone and tablet and do not want it to show or slide out when full screen.

2.) I removed the content in the off canvas module to remove the content which was there. So, right now my nav collapse slide out is blank in full screen and shows the main menu in tablet or phone. How do I set the nav collapse slide out such that when in full screen the main menu is also there? I can position a main menu module in that off canvas position but, it shows ALL the menu items in one big list, and both menus show up in tablet/phone.

3.) I have looked for how-to documentation on the nav collapse but did not locate. Can you direct me to the documentation. I am using Responsive2 template.

Thanks.
~d
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 2 years 5 months ago by drchamp. Reason: update of content
The administrator has disabled public write access.
Hi There,

Do you have a link for the site?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
staging2.4qf.org/
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi There,

If you filter for position in module manager and look for off canvas do you still have a published module in there?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes. It is the original off canvas module.

I deleted all the text content in the module. It was just some text saying this is off canvas.

~d
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
Hi

I seem to be seeing an empty custom html module in that position

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
modules.jpg


Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes. That's correct. Its empty. But when going to tablet or phone the main menu is there. I did try to put the home menu in there but the menu would always show with all the child menus open and not with just the top level menu items with a + to open the child menu items.

So, can I,
1. just have the little three lined icon just show for tablets and phone? not full screen.
2. put the home menu in that module position and have it show correctly? how to do this?
3. is there more documentation for the nav collapse feature?

Thanks
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
The off canvas toggle will display on desktop if it has content

For it not to display on desktop it needs to be empty

With the off canvas setting it should display the menu when the collapse value is triggered and the off canvas menu should automatically display the main menu if the template settings are set up

I can see the toggle and menu when I collapse the screen

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
OK.

So it appears that to have the icon not show I need to have no content in the offcanvas position. There is no way to have the icon not show when full but show when phone/tablet.

In that case what is the best way to add the home menu to that offcanvas position module?

Thanks.
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
The offcanvas will show the main menu automatically

I can see the menu now when the screen is collapsed

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Paul thanks for your time.
Here is what I'm trying to do but can not figure out how to do it.

I need the off canvas slide out to look the same when in phone, tablet, or full screen. The content in the slide out needs to be the Main Menu. The Main Menu needs to show the top menu items and have a way to click and open up the child items. Just like the default menu which gets shown when the Template Collapsed Menu Behavior is set to Offcanvas, it has a "+" next to the top items to open and select the child items.

If I set the Collapsed value to Offcanvas then when in phone/tablet the content from the Main Menu Module AND the Main menu from the Offcanvas setting both show. I do not want both to show. I only want ONE menu in all views.

I have tried various menu class suffix, module class suffix, module styles. But can not get the menu to show the top items with a way to expand and show the child items. Either only top items show or all items show.

How can I set up a menu module to display like an accordion menu?

At the moment I have the template setting for no change and the menu module in the offcanvas position.

Thanks.
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
Last Edit: 2 years 5 months ago by drchamp.
The administrator has disabled public write access.
Paul,

For now I have solved my situation. I found more options in the template configuration for the slideout and offcanvas settings. I found I can eliminate the menu/slideout icon when not in full screen and show the three lined icon only in phone/tablet along with the zen accordion main menu showing. Great!

Also I found (when trying to implement my own zen accordion menu) that I needed the accordion style set in the module class suffix and most importantly there needs to be a space before the word accordion.

So thanks again for the support on this issue as continue to I learn the ins and outs.

~d
  • drchamp's Avatar
  • drchamp
  • 12 Month Developer
  • 163 posts
  • 1 Thanks
  • Karma: 1
The administrator has disabled public write access.
ah cool nice one

You've covered a lot of ground here

Best of luck with the site

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
The following user(s) said Thank You: drchamp

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers