Public Forums 71,145 posts

[jscarfe Friend jscarfeJoin date: December 2012Posts: 22Downloads:0Uploads:2 Thanks: 13 Thanked: 4 times in 1 posts]

#189329

I’d like to enable off-canvas navigation when devices fall under to 980px range (like an iPad in Portrait mode). I’m using the T3V3 framework.

Thanks in advance to anyone that can help!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#500541

HI jscarfe,

– You can open file: /templates/ja_your_default_template_name/css/off-canvas.css, you will see this code:

@media (max-width: 767px) { <<< change to your desired value;
.off-canvas {
width: 100%;
overflow-x: hidden;
...........


– If you’re familiar with less, you can change it in file: /plugins/system/t3/base/less/variable.less

> Look for this code:


// Define Navbar Collapse Width @navbarCollapseWidth: 767px;


> Then compile less to css (there is button called ‘Compile Less to Css’ in back-end > template manager)

1 user says Thank You to Saguaros for this useful post

1. jscarfe

[jscarfe Friend jscarfeJoin date: December 2012Posts: 22Downloads:0Uploads:2 Thanks: 13 Thanked: 4 times in 1 posts]

#500617

Thanks Saguaros!

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#500634

<em>@jscarfe 382779 wrote:</em><blockquote>Thanks Saguaros!</blockquote>
hello saguaros
can you put the correct css code ?
regards

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#500703

Could you see my above reply?

[micker Friend mickerJoin date: March 2006Posts: 131Downloads:1Uploads:3 Thanks: 9 Thanked: 4 times in 1 posts]

#500719

i try it no change …
can you explain more ?
it possible to insert it on custom.css ?
thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#501050

You can see above code and change to your desired value. You can try to add css to custom.css file if you are not familiar with Less. 🙂

[Author]

Posts