I need to hide magento 2 store top navigation menu from the desktop view but visible on mobile view. How can this be done ?

  • can you add picture of top navigation links.
    – Hiren
    Aug 2 '19 at 4:30
  • Did you resolve your issue? Aug 2 '19 at 11:59
  • @ShoaibMunir i have solved this issue.
    – ashanr
    Aug 12 '19 at 5:01
  • If your solution is different than my answer, I would suggest you add it in answer so that it would helpful for others in future Aug 12 '19 at 8:11

There are two different ways to do this.

One with CSS

Add media query and hide from desktop while display:block in mobile

@media only screen and (max-width: 600px) {

The other way is by php mobile device check.

Add a helper function in any of your module

in any helper add isMobile function app/code/Vendor/Module/Helper/Data.php


namespace Vendor\Module\Helper;
use \Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
    public function isMobile(){
        //return true;
        $regex_match = "/(nokia|iphone|ipad|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|"
            . "htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|"
            . "blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|"
            . "symbian|smartphone|mmp|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|"
            . "jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220"
            . ")/i";

        if(preg_match("/(huaweimediapad)/i", strtolower($_SERVER['HTTP_USER_AGENT']))){
            return false;

        if (preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']))) {
            return TRUE;

        if (isset($_SERVER['HTTP_ACCEPT']) && ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']))))) {
            return TRUE;

        if(stripos($_SERVER['HTTP_USER_AGENT'],"Android") && stripos($_SERVER['HTTP_USER_AGENT'],"mobile")){

            return true;



            return false;


        $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
        $mobile_agents = array(
            'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
            'wapr','webc','winw','winw','xda ','xda-');

        if (in_array($mobile_ua,$mobile_agents)) {
            return TRUE;

        if (isset($_SERVER['ALL_HTTP']) && strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
            return TRUE;

        return FALSE;

This function will check if customer is visiting from mobile or desktop

Now use this function in your phtml like this:

<?php $isMobile = $this->helper('\Vendor\Module\Helper\Data')->isMobile(); ?>
<?php if($isMobile){ ?>
    <?php //Call mobile menu here ?>
<?php } ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.