0

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. – user4536 Aug 2 at 4:30
  • Did you resolve your issue? – Shoaib Munir Aug 2 at 11:59
  • @ShoaibMunir i have solved this issue. – ashanr Aug 12 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 – Shoaib Munir Aug 12 at 8:11
1

There are two different ways to do this.

One with CSS

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

.Your_Class{
    display:none;
}
@media only screen and (max-width: 600px) {
  .Your_Class{
    display:block;
  }
}

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

<?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";

        //DISPLAY DESKTOP THEME ON HAUWEI TAB
        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;

        }

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

            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',
            'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
            'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
            'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
            'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
            'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
            'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
            'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
            '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.