Disable megamenu on default theme, except for mobiles

[Gomlers]

I have prestashop 1.6, running with default theme.

 

I have a lot of categories, and I don't want to show all these when hovering over the top-menu, except when browsing from small screens like smartphones.

 

How can I disable the drop-down showing all the categories and sub categories from the top-menu from pc's, laptops, iPads, and other tablets - but still show them for mobiles?

 

I have some css knowledge, and I have heard of @media rules in css before - but I don't know what to write where

 

[vekia]

you can try with something like:
 

@media (min-width:480px){
  #block_top_menu .submenu-container {display:none!important;}
}

[Gomlers]

Thank you!

 

I also made it work using this one:

 

@media only screen
and (min-width : 767px) {
#block_top_menu ul li ul {
    display:none !important;

 

On the above I can also remove sub-sub-categories by adding an li between ul and ul, but then still show sub-categories:

 

@media only screen
and (min-width : 767px) {
#block_top_menu ul li li ul {
    display:none !important;

 

But I'll go for the one you have, it makes more sence for what I'm trying to accomplish

 

Another problem though...

 

The top-menu is not working properly from my samsung 10.2 tablet.

It's clickable, but it works only now and then. If I press my finger on one of the categories for the top-menu, I always get the option to open in another window, but when clicking normally, nothing happens most of the times.

 

This is still the default template on 1.6.0.6 , with the css code you provided as the only change.

 

Is there anything I can do to make the top-menu buttons better clickable for tablets?