Public Forums 71,145 posts

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#194912

As the title say I would like to show respectivly hide ceratin menu items on mobile devices.

I tried playing with megamenu->menuitem->extra classes and adding:

.hidden-lg

to a menu item, but that didn’t seem to work.

Any ideas please?

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#523246

Ok. I found something here:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive

I added:
hidden-desktop

That works fine.

to the menu item I wanted visble only on mmobiles and:
visible-desktop
to the menu item I wanted only on desktop version.

This still shows the menu in mobile.

Please, any suggestions? so near and yet…..

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#523251

Ok I found this:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive

I have two prices menus, so I added:
hidden-desktop
to the one I wanted to see only on mobiles.
This works.

I then added:
visible-desktop
to the one I only wanted to see on the desktop.

This is still visible on mobile.

Any Ideas, please.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#523253

Purity III uses Bootstrap 3 I believe – but I can’t get that to work with the menüs either.

http://getbootstrap.com/css/#responsive-utilities

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#523257

Right Thanks for the pointer.

I changed the syntax to desktop = lg.

Still doesn’t work here either.

What to do?

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#523318

T3 provide an option to show/hide an element for megamenu when the menu is collapsed (Hide when collapse). However, the function doesn’t work on the latest version of T3. The fix will be available in next release of T3.

2 users say Thank You to Khanh Le for this useful post

1. phong nam
2. swissa

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#523343

Ah.. and when will that be? Do you know?

[Khanh Le Moderator Khanh LeJoin date: November 2013Posts: 1884Downloads:41Uploads:31 Thanks: 44 Thanked: 203 times in 131 posts]

#523346

I’ve made a commit to fix the issue on github here:
https://github.com/t3framework/t3/commit/61fbea8a490fec3cc9103fce7adfc8da784af19d

You can update this file to fix the issue:
https://github.com/t3framework/t3/blob/master/source/plg_system_t3/base-bs3/js/nav-collapse.js

2 users say Thank You to Khanh Le for this useful post

1. swissa
2. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#523362

Great thanks, that works a treat, except for on the dolphin browser on android 4.2.2. Here it breaks the page.

Default browser is fine. I’ll try it on firefox just to check.

Edit: works of firefox as well.

1 user says Thank You to fintan for this useful post

1. phong nam

[rzrz Friend rzrzJoin date: June 2012Posts: 33Downloads:0Uploads:3 Thanks: 3]

#565658

Template Information
Name:Purity III
Version:1.1.2

Framework Information
Name:T3
FrameworkVersion:2.4.8

running on the above specs but I still can’t get it working.. the “Hide when collapse” button is enabled for certain menu item but it is still showing on the smaller screens.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#565903

I used Purity III and T3 framework version as you mentioned but I could not duplicate the problem at my end

+ Step 1:

+ Step 2:

+ Step 3:

---

Attachments:

1. 
2. 
3. 

[rzrz Friend rzrzJoin date: June 2012Posts: 33Downloads:0Uploads:3 Thanks: 3]

#566872

Hi I tried again and it works, but now I have another question – how to hide selected parent menu item in mobile environment?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#566986

<em>@rzrz 468484 wrote:</em><blockquote>Hi I tried again and it works, but now I have another question – how to hide selected parent menu item in mobile environment?</blockquote>

You can add hidden-xs css class into Extra Class, see the screenshot

---

Attachments:

1. 

[rzrz Friend rzrzJoin date: June 2012Posts: 33Downloads:0Uploads:3 Thanks: 3]

#567153

hi thanks again and is it possible to hide parent menu item and display child menu item at the same time in mobile?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#567184

<em>@rzrz 468835 wrote:</em><blockquote>hi thanks again and is it possible to hide parent menu item and display child menu item at the same time in mobile?</blockquote>

How can you touch child menu item without parent menu?

[Author]

Posts