Disable submenu from desktop view only

[andrewasghar]

Hi,

I need to Disable submenu from desktop view from the header but It must work in mobile.

I have done some research and can't seem to find a solution for this.

Any help would be great

[Rakesh Jesadiya]

By default no native functionality available for this type of functionality.

You can do it using Css way. Just hide submenu using css in desktop view and enable those view for mobile view.

[Sunil Patel]

Hello @andrewasghar

I don't know you are using default Magento RWD theme or not.

I am giving a solution based on RWD theme

@media only screen and (min-width: 771px){

.nav-primary li.level0 ul { display:none !important;} 

}

Hope it will help you.

If work then marks solution or give kudos.

[andrewasghar]

This didn't seem to do the trick.

Also, I forgot to mention I only need to disable 3 menus

Example

Menu name 1   Menu name 2    Menu name 3     Menu name 4   Menu name 5   

Disable Subs   Disable Subs   Disable Subs    Don't disbable   Don't disbable   

[Sunil Patel]

Hello @andrewasghar

Either you can do using css using 

.nav-1 .level0, .nav-2 .level0 { display:none} 

where nav-1 menu class for you need to check it.

or 

go to that category into the backend and set  Include in Menu to No

Hope it will help you.

[andrewasghar]

I must be doing something wrong as nothing seems to happen when I copy that code.

[andrewasghar]

/* All Levels */
#nav > li, #nav ul.level0 li { text-align:left; position:relative; }
#nav > li.over, #nav ul.level0 li.over { }
#nav > li.parent, #nav ul.level0 li.parent {}
#nav > li > a, #nav ul.level0 li a { display:block; text-decoration:none; color:#000; font-size:14px; font-weight:700; text-transform:uppercase; }
#nav > li > a:hover, #nav ul.level0  li a:hover { text-decoration:none; }
#nav > li > a span, #nav ul.level0 li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav > li ul.level0 a span { white-space:normal; }
#nav > li.parent > a > em, #nav ul.level0 li.parent a em {float:right; display:none; width:32px; text-align:center; font-style:normal; font-weight:700; }
#nav ul.level0 li.parent a em { width:32px; }

/* 1st Level */
#nav>li { float:left; margin:0 5px 0 0; }
#nav>li>a { display:block; position:relative; color:#fff; font-size:18px; font-weight:700; line-height:27px; padding:0 9px 1px;letter-spacing: -1px;}
#nav>li>a:hover,
#nav>li.over>a,
#nav>li.active>a { color:#000; background:#ffe51e; }
#nav>li.parent>a:hover:before,
#nav>li.parent.over>a:before { content:'';width:100%; height:16px; position:absolute; z-index:998; top:28px; left:0; background:#ffe51e; }

this is part of local.css that has nav. i take it this is the location i need to add this code. I also have override.css but not sure i would put this code your mention in that location.

Thanks for your help so far