Hi - I'm confused over menu settings.
I've set up a menu header, and all the menu items are displayed underneath it.
I want the menu items hidden until the header is clicked on, but I can't see how to do this.
Can anybody help please?
www.vintagestarwarsdiecast.co.uk
Responsive2 template
J 3.4.8
Thanks
Ian

Hi Ian,

You are referring to the sidebar menu is that correct?

Cheers
Paul

Hi Paul- thanks for getting back to me.
Yes it's the sidebar menus.
Can't see what I'm doing wrong… or not doing right
Ian

Is it an accordion menu you want to display?

Cheers
Paul

Hi Paul - sorry for the slow reply.

An accordion menu would be fine…

Thanks

Ian

Hi Ian,

you will need to use separator rather than heading link type as the toggle links

Hmm - text separator?
Thanks
Ian

Ah. Found the documentation - got it now. Thanks Paul.

Still got a problem though, the menu is not appearing in the off canvas position on my mobile.

Can't see where I'm going wrong here either…

Sorry to be a pain,

Ian

Hi Ian,

Nothing wrong as such but its the menu position that is added to mobile menu options not a sidebar module

I'll take a look shortly to see what options you have

Cheers
Paul

Thanks Paul

Try using these classes

docs.joomlabamboo.com/zen-grid-framework-4/responsive/responsive-module-classes

to hide the menu on desktop and maybe tablet

hide the accordion on mobile

Cheers
Paul

Accordion working well

Cheers
Paul

Thanks Paul

No problem

Cheers
Paul

Hi Paul - the -hidden and -visible work a treat!

But one small problem I now have is that the zen icon three horizontal bars for the off canvass menu now shows on all screen sizes.

To prevent this I tried the code below, but of course I lost all the zen icons on the larger screens, which I didn't want.

@media only screen and (min-width : 768px)
{
.zen-icon {display:none;}
}

Any idea how to fix this?

Thanks

Ian

Hi Ian,

Are you trying to hide the main menu? as I see home in the menu position

Cheers
Paul

The style is valid syntax wise

@media only screen and (min-width : 768px) {
.zen-icon {display:none;}
}

Don't you want to hide this as the module is empty?

Cheers
Paul

Just for reference its a bit easier if a thread talks about a line of css if its the last line in the custom.css file - saves lazy me having to scan/skim the code

Cheers
Paul

Hi Paul - thanks for getting back to me.
Point taken about the css - I'll remember for the future.
It's not the menu I'm trying to hide, it's the zen icon. Screenshot attached.
Since using -hide and -visible it appears on desktop and tablet sizes. I've hidden the menus at those sizes, so I don't want the icon to appear.
It's working fine on mobile, but I don't want off-canvass to show on tablet and desktop.
Where am I going wrong?
Puzzled
Ian

Hi Ian,

Have you set the minimum width visible option for the menu in the menu panel in the template controls?

Thanks