Question about the Off-Canvas Navigation

[iaindarkflare]

Hi James,

I want to use the off-canvas navigation on mobile, but have the nav visible on desktop, what's the best way of doing so?

I reckon that I can either; duplicate the nav and use the hidden and visible classes…or…override the width and visibility of .navigation for desktop only using the media queries within my css.

The duplicate may be the most straightforward way, especially if the layout of the nav on desktop would be considerably different from the mobile, but toggling the visibility may work best if the navigation is to be left or right aligned.

Just wanted to check in case I'm being daft and missing an easy way of setting it so the off-canvas nav only kicks in on certain layouts?

Alternatively, would I be best to use the previous method for creating navigation using the dropdown functionality when the layouts don't fit?

Just trying to be mindful of the aria-hidden attribute that is applied by the navigation.

Cheers,
Iain

[JimBobSquarePants]

To be honest I'm not sure. This iteration of the navigation menu is an all or nothing approach.

Duplication probably isn't wise since the presence of duplicate elements could confuse screen readers so I would recommend using media queries and the $.support.currentGrid() method to let you know when to toggle the aria hidden attribute.

It might however, be simpler to take the basis of my code and use that for whatever you need.

I did make a start to making the navigation toggleable but haven't got far since I don't know if I can cater for what developers would need. I would like to have another crack at it though when I can.

[iaindarkflare]

Okay, I'll see what I can do. Thanks for getting back to me!

[JimBobSquarePants]

No worries 😄 I'll start experimenting again as soon as I can. It's all hectic here at the moment though what with the big move and all.

[iaindarkflare]

I would imagine. Hope it all goes well! :)

[JimBobSquarePants]

Cheers!