how to hide header menu item when using mobile devices?

Avatar

Avatar

jayv25585659

Avatar

jayv25585659

jayv25585659

27-02-2018

so I have a custom menu item that I'm displaying on my header (it's just an icon that displays a menu on hover)

<sly data-sly-use.bookmark="berkeley/components/global/bookmark-menu/bookmark-menu.html" data-sly-call="${bookmark.object@detailListFlag=''}" data-sly-unwrap />

I have a need that I need to omit/hide this menu item while using mobile devices.

while I can use Javascript to do this (jQuery + wurlf-js), I'm wondering if this can be done by some sort of something already built-in to AEM (example: Java libraries). If there is something available, can you please provide a link or perhaps a short example?

Thanks a lot

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Hemant_arora

Avatar

Hemant_arora

Hemant_arora

28-02-2018

Get the device type from a generic service class and use the value of that variable in sightly and add condition

WCMUsePojo class

if(request.getHeader("User-Agent").indexOf("Mobile") != -1) {

    //you're in mobile land 

} else {

    //nope, this is probably a desktop 

}

SIGHTLY

<li data-sly-test="${isMobile}">text</li>

Answers (1)

Answers (1)

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

28-02-2018

NIce answer - which is correct!