Joomla Templates Club 406,261 posts

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#662461

Hi,

How can we do a menu redirect and substitute a menu item when a visitor is viewing the website in the responsive layout?

For example, we want Menu item A to display when a visitor is viewing the website on a full size desktop monitor.
But when a visitor views the website on a mobile device Menu item A is hidden and Menu item B is displayed.

Menu item B is hidden on a full size desktop monitor view.

How can we go about this?

Please advise asap

Thanks

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

#662612

You can try to use my solution below

+ Create menu item A and B on your site

+ Go to Admin site -> Template manager -> JA Charity template -> click Megamenu button and hidden-desktop class into menu item B (it will be hidden on desktop layout)

+ Open templates/ja_charity/css/custom.css file and add new rule

@media (max-width: 767px) {
.t3-off-canvas .t3-off-canvas-body .nav li.item-119 {
display: none;
}
}


with 119: is menu id of menu item A on your site and menu item A will be hidden on mobile layout

1 user says Thank You to Ninja Lead for this useful post

1. romolo

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

#745770

You can try to use my solution below

+ Create menu item A and B on your site

+ Go to Admin site -> Template manager -> JA Charity template -> click Megamenu button and hidden-desktop class into menu item B (it will be hidden on desktop layout)

+ Open templates/ja_charity/css/custom.css file and add new rule

@media (max-width: 767px) {
.t3-off-canvas .t3-off-canvas-body .nav li.item-119 {
display: none;
}
}


with 119: is menu id of menu item A on your site and menu item A will be hidden on mobile layout

1 user says Thank You to Ninja Lead for this useful post

1. romolo

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#664710

Thanks

Ive set up to the hidden-class on a test menu item and worked between desktop size and mobile size.

I COULD NOT get the CSS rule to apply to any of my menu items though.. They are still visible in mobile size. I have dumped CACHE and performed refreshes on the browser but nothing.

HOWEVER – unsure why you did not advise to simply use the classes hidden-desktop and visible-desktop as this performs the functionality exactly.

So I have used this to achieve what I needed without having to need to put anything into custom.css

Thanks for the pointer as it put me on the right track.

R

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#746314

Thanks

Ive set up to the hidden-class on a test menu item and worked between desktop size and mobile size.

I COULD NOT get the CSS rule to apply to any of my menu items though.. They are still visible in mobile size. I have dumped CACHE and performed refreshes on the browser but nothing.

HOWEVER – unsure why you did not advise to simply use the classes hidden-desktop and visible-desktop as this performs the functionality exactly.

So I have used this to achieve what I needed without having to need to put anything into custom.css

Thanks for the pointer as it put me on the right track.

R

[Author]

Posts