how to hide header menu item when using mobile devices? | Community
Skip to main content
jayv25585659
jayv25585659
New Participant
February 28, 2018
Solved

how to hide header menu item when using mobile devices?

  • February 28, 2018
  • 2 replies
  • 2343 views

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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Hemant_arora

    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>

    2 replies

    smacdonald2008
    smacdonald2008
    New Participant
    February 28, 2018

    NIce answer - which is correct!

    Hemant_arora
    Hemant_aroraAccepted solution
    New Participant
    February 28, 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>

      Terms & ConditionsAccessibility statement

      Loading footer...