Mobile / Tablet Menu Collapsing

Hi! Thank you ??

Normally this custom CSS should’ve worked:

@media only screen and (max-width: 719px) {
.nav ul { display: none!important; }
.nav li:hover ul { display: block!important; }
}

However, since javascript needs to set height of the outer container in order to be able to smoothly animate the dynamic height of the dropdown, it kind of overflows the container I think. Give it a test and see if it does it on mobile.

Hi Alex,

Thanks for coming back to me. I have added that to my child theme stylesheet and it doesn’t appear to have had any effect, positive or negative. Any ideas?

Thanks

Dan

Oh, no it has worked but as you said the change then limits the overall size of the menu, so when expanded the other items go off of the edge of the screen sadly.

Hi Alex.
It seems to work fine except for the fact that, if there’s a link related to a list element and one wants to open its submenu, browser touch/tap launches navigation to that link, so that submenus aren’t visible but for a few.
How may I fix this?
Should I implement some touch js control?

*** EDIT ***
I tried many times to trick your css in order to make menu collapsible, but no way.
Lastly, I was trying to follow this example. It seems to work well and it’s only css.

@alemarengo84: Did you implement this on your Hueman theme?? Does it work?? Please let me know as I’m looking for a solution too.

It would be awesome if there’s any way to do an off-canvas navigation for mobile devices.

@miroamarillo Unfortunately, I didn’t manage to make it work. ??
As Alexander wrote, we should take in consideration to rethink/rewrite mobile menu code.
I think it will be a great update for Hueman theme. Sorry!

@miroamarillo: I’m trying to make this plugin work, at least for mobile version.

Sadly I couldn’t make it work without getting some odd behaviour. In the end I implemented a secondary menu to try and cut down the number of entries on the primary menu, which seems to have worked well.

Where exactly would i put this code in my CSS?

@media only screen and (max-width: 719px) {
.nav ul { display: none!important; }
.nav li:hover ul { display: block!important; }
}

You need to go into the them editor and then paste it into a new line on the stylesheet.css

For me it didn’t produce the results that I’d hoped for, but this may work well for you.

Good luck.

Does anyone know if there’s a solution to this? The menu is collapsed with the code above, but it hides behind the page content once you expand it. I’d really love if I could have a functional menu since i have lots of pages and don’t want my users to scroll a lot.

@raphaefeli – Please don’t post the same question in multiple threads. Since you started another topic you don’t need to repost the question here. Thank you.