cancel
Showing results for 
Search instead for 
Did you mean: 

Disable submenu from desktop view only

Disable submenu from desktop view only

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

6 REPLIES

Re: Disable submenu from desktop view only

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.
If Issue Solved, Click Kudos/Accept As solutions.

Re: Disable submenu from desktop view only

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.

 

Re: Disable submenu from desktop view only

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   

 

 

 

Re: Disable submenu from desktop view only

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.

 

 

Re: Disable submenu from desktop view only

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

 

Re: Disable submenu from desktop view only

/* 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