I am working with a Xero Template upgraded to Joomla 3.4
To obtain the off-canvas menu styling, similar to those available on JB templates such as sidewinder, what do you recommend is the best approach for accessing such OffCanvan menu styles and Module Styles?
Regards, S

Hi S,

With "off-canvas menu styling" what exactly are you looking to create?

Cheers
Paul

Hi Paul,
I am looking to have some styling that can be applied to the menu, maybe to provide a divider between the menu items of a certain level. Having some styles to choose from for the font (for instance all caps) and padding would be good.
Can be pretty clean and simple, but with control of the spacing. I also want to put a module in there at times with some padding.
regards,
Stephen

I have not been using bootstrap. Is that the way to go, or is their off canvas stylying built into the xero template without bootstrap?

Do you have a link for where you are up to with changing the css?

You son't bootstrap unless an extension requires the css support

Cheers
Paul

Hi Paul,
Have not touched the css yet. I brought the site on-line so you can see www.adcid.org
best,
Stephen

Hi Stephen,

Id use the menu id name to target styling at it for example

#zen-menu-449 li {padding:1em;}
#zen-menu-449 li a, #zen-menu-449 .zen-menu-heading {color:red; text-transform:uppercase;}

First style adds some padding and second example adds a text colour together with uppercase

Cheers
Paul

If I put your stylng code in the custom css it works on all the menu items. Is there something special about menu-499

When I tested for each actual menu id, the formatting did not change.

For instance...
#zen-menu-196 li {padding:1em;}
#zen-menu-196 li a, #zen-menu-196 .zen-menu-heading {color:red; text-transform:uppercase;}

Hi

<ul id="zen-menu-449"> is the id class is on the un-ordered list

If you wanted to target individual list elements the easiest way is

<li class="item-196 with-caption parent justify">

so that being a class its .item-196 rather than #item-196

For example li.item-196 span {color:red} targets the span of this list element

Cheers
Paul

Thanks Paul,
The span only changes of the icon colour rather than the whole menu item, although I like actually like the effect.

Is there any way the menu can be formatted so it is not as an unordered list. (i.e. no bullets)

Also, is there a formatting that can be applied to get a line between each menu item?

cheers,
Stephen

Actually an easier way to target is with this class:

.off-canvas-body li {list-style-type:none;border-bottom:1px solid #eee}

Hope that helps.

Anthony

Thanks Antony,

That works well, as the formatting does not affect the main menu.

Useful learning exercise this too.

If I put a module under the off-canvas menu items using the zen menu, what is the best way to approach this? I don't want the same menu to appear in the main mega menu.

Apologies. My last reply was not clear.

If I "select a module" from the "zen menu" for the off-canvas menu items. Is there a best way to do this?

I do not necessarily want the same module to appear in the mega menu, although the menu item appears in both.

many thanks,

Stephen

Hi Stephen,

Do you mean with off canvas at mobile width or viewing on desktop?

Cheers
Paul

Hi Paul,
Off canvas viewing on desktop.
cheers,
Stephen

Can I just check with the two modules are they both using the same menu?

Cheers
Paul

Yes they are both using the main menu.
regards, S

Hi Stephen,

You would need to use display: none;
Do you have that set up?

Cheers
Paul

Hi Paul,
No I don't have that set-up.
Is that custom css too?
regards,
Stephen

Hi Stephen,

Yes you would need target the module position together with the module type or again that position together with a unique module class

Cheers
Paul